如何将 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>
登录后复制
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容