vue实现简单的星级评分组件源码

vue星级评分组件源码,具体代码如下所示:

<!--自定义组件-->

<template>

<!--结构层-->

<div id="star">

<span v-for="classn in starArrs" :class="classn" class="staritem"></span>

<!--<span class="staritem onstar"></span>

<span class="staritem onstar"></span>

<span class="staritem halfstar"></span>

<span class="staritem offstar"></span>-->

<!--根据传递过来的分数得到对应的星星

4.7 四颗半星

1个位数代表的是全里亮,

2,当分数大于等于0.5 是一个半星

3.当全星和半星不足五个的时候,剩下的都是灰色的星星

-->

</div>

</template>

<script>

// 行为

export default{

props:['score'],

created(){

console.log("子组件");

},

mounted(){

console.log("打印传递的分数");

},

computed:{

starArrs(){

var starArr=[]; //3.9

// 全星星的个数

let onstar = parseInt(this.score);

console.log(onstar)

// 是否有半星

let halfStar = Math.round(this.score-onstar)?true:false;

// 有多少课灰色的星星

for (var i=0;i<onstar;i++) {

starArr.push('onstar')

}

if(halfStar){

starArr.push('halfstar')

}

while(starArr.length<5){

starArr.push('offstar')

}

return starArr;

}

}

}

</script>

<style scoped="scoped">

/*独立作用域的样式*/

.staritem{

display: inline-block;

width: 0.37037rem;

height: 0.37037rem;

}

/*全星星*/

.onstar{

background: url(./star24_on@2x.png);

background-size: 0.37037rem;

}

.halfstar{

background: url('./star24_half@2x.png');

}

.offstar{

background: url('./star24_off@2x.png');

}

</style>

背景图

star24_on@2x.png 

star24_half@2x.png  

star24_off@2x.png

总结

以上所述是小编给大家介绍的vue实现简单的星级评分组件源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是 vue实现简单的星级评分组件源码 的全部内容, 来源链接: utcz.com/z/324062.html

回到顶部