好资源导航 » 文章资讯 » Vue实现星级评价效果实例详解

Vue实现星级评价效果实例详解

2023-08-03 19:00:04 65

我们把星级评价单独做成一个Star组件，抽离出来，其中父组件中引入(传入的是评分的值)

初始Star.vue

首先我们把要做星级图片用类名为star-item的span标签循环出来，星级图片有三张，全星，半星，空星

下面只罗列关键的css部分,通过增加类区分图片

.star-item.on{
background-image:url(./img/star24_on@2x.png);
}
.star-item.half{
background-image:url(./img/star24_half@2x.png);
}
.star-item.off{
background-image:url(./img/star24_off@2x.png);
}

接下来修改Star.vue的代码

itemClasses值是通过计算属性获取的，思路：

通过computed返回一个长度为5的数组（显示5颗星）

数组的值是上述css取的不同星对应的类名，再通过绑定每一个循环添加的class，从而遍历星级。

比如举例评分：

4.7分对应的数组为['on','on','on','on','half']

3.4分对应的数组为['on','on','on','half','half']

JS部分的代码：

//星星长度
constLENGTH=5

//星星的状态
constCLS_ON='on'
constCLS_HALF='half'
constCLS_OFF='off'

exportdefault{
name:'Star',
props:{
score:Number
},
computed:{
itemClasses(){
letresult=[]

letscore=Math.floor(this.score*2)/2

//半星(通过跟1取余判断是否为小数)
lethasDecimal=score%1!==0

//全星（向下取整，获取全星部分）
letinteger=Math.floor(score)

//遍历全星
for(leti=0;i
itemClasses最终是返回了一个长度为5的数组，需要注意的是
letscore=Math.floor(this.score*2)/2
半星的划分：只有当小数第一位大于或等于5才可以算为半星，否则是空星。该计算是为了小数部分>=0.5的计算结果带有小数，从而再后面跟1取余判断是否为半星。一开始有点蒙，多试几个数想想就懂了。
比如4.3分没有半星，4.5有半星出现
结果：
比如传入的值为4.7，则显示
 
总结
以上所述是小编给大家介绍的Vue实现星级评价效果实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue实现星级评价效果实例详解

热门推荐

随机推荐