Vue2实现店铺的星级评价及封装成veu插件 支持Vue.use(star)

web前端开发技术现状
中高级前端开发技术
web前端开发技术汇总 【转】

star.vue
html 代码

<template>
<div class=”star”:class=”starType”>
<span v-for=”itemClass in itemClasses”:class=”itemClass”class=”star-item”></span>
</div>
</template>
<script>
const LENGTH = 5;
const CLS_ON = “on”;
const CLS_HALF = “half”;
const CLS_OFF = “off”;
export default {
props:{
//接受父组件参数数据 来进行数据传递
size:{
type:Number
},
score:{
type:Number
}
},
computed:{
//计算属性
starType:function(){
return”star-“+this.size;
},
itemClasses:function(){
let result =[];
let score =Math.floor(this.score*2)/2;//分数
let hasDecimal = score %1!==0;//半星
let integer =Math.floor(score);//全星
for(let i =0; i < integer; i++){
result.push(CLS_ON); //全星的样式
}
if(hasDecimal){
result.push(CLS_HALF); //半星的样式
}
while(result.length< LENGTH){
result.push(CLS_OFF); //空白星星样式
}
return result;
}
}
};
</script>
<style>
.star {
font-size:0;
}
.star .star-item {
display:inline-block;
background-repeat:no-repeat;
}
.star-48 .star-item {
display:inline-block;
width:20px;
height:20px;
margin-right:22px;
background-size:20px20px;
}
.star-48 .star-item:last-child {
margin-right:0;
}
.star-48 .on {
background-image:url(star48_on@2x.png);
}
.star-48 .half {
background-image:url(star48_half@2x.png);
}
.star-48 .off {
background-image:url(star48_off@2x.png);
}
.star-36 .star-item {
width:15px;
height:15px;
margin-right:16px;
background-size:15px15px;
}
.star-36 .on {
background-image:url(star36_on@2x.png);
}
.star-36 .half {
background-image:url(star36_half@2x.png);
}
.star-36 .off {
background-image:url(star36_off@2x.png);
}
.star-24 .star-item {
width:10px;
height:10px;
margin-right:3px;
background-size:10px10px;
}
.star-24 .on {
background-image:url(star24_on@2x.png);
}
.star-24 .half {
background-image:url(star24_half@2x.png);
}
.star-24 .off {
background-image:url(star24_off@2x.png);
}
</style>

在页面引用
html 代码

<body>
    <star :size=”48″ :score=”seller.score”>
        </Star_>
</body>
<script>
import star from ‘../star/star.vue’;
export default {
components:{
star
}
}
</script>

下面我们来实现vue.use(Star_)插件的形式调用. star.vue不变 请看最上面的代码 在star.vue同级创建 index.js(名字无所谓只要路径没问题)
html 代码

import StarComponent from ‘./star.vue
const Star_ing = {
    install: function(Vue) {
        // Star_ 引用的组件名称<Star_></Star_>
        Vue.component(‘Star_’, StarComponent)
    },
}
export default Star_ing

在main.js入口文件下引用该组件
html 代码

import Star from ‘./components/star’ //自定义星星等级组件
Vue.use(Star)
    引用方式
    <body>
        <Star_:size=”48″:score=”seller.score”></Star_>
</body>

精通web前端开发技术
开发  前端技术
直播平台前端开发技术
» 本文来自:前端开发者 » 《Vue2实现店铺的星级评价及封装成veu插件 支持Vue.use(star)》
» 本文链接地址:https://www.rokub.com/7928.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!