如何将 Element UI 的 el-rate 组件从 5 颗星评分改为百分制?

如何将 Element UI 的 el-rate 组件从 5 颗星评分改为百分制?

如何将 el-rate 5 颗星的分值显示改为百分制?

el-rate 提供了 allow-half 属性,可以开启半星评分。默认情况下,每颗星代表 1 分。要将评分改为 5 颗星 5 分制,可以设置 max 属性为 10,每半颗星代表 10 分。

示例代码:

<el-rate v-model="value" :max="10" allow-half :show-score="true"></el-rate>
登录后复制

动态显示鼠标悬停时数值

监听 el-rate 的 @mousemove 事件,获取 el-rate 内部的 text 值,并乘以 20 即可得到百分比分数。

示例代码:

<el-rate v-model="value" :max="10" allow-half :show-score="true"></el-rate><script> export default {   methods: {     getPercentage(event) {       const text = event.target.querySelector('.el-rate__text')       const percentage = text.innerText * 20       console.log(percentage)     }   } } </script>
登录后复制

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容