如何使用 el-Rate 实现每半颗星为 10 分的评分机制?

如何使用 el-Rate 实现每半颗星为 10 分的评分机制?

el-rate 半星评分

本文探讨如何在 el-rate 组件中实现每半颗星为 10 分的评分机制。

如何实现?

一个简单的解决方案是开启 el-rate 的 allow-half 属性,并将评分结果乘以 20,即可将 5 星 5 分评分制转换为 5 星百分制。

使用插槽

由于 el-rate 无法使用插槽,因此可以使用监听@mousemove 事件(使用 .native 修饰符),获取 el-rate 内部的 text 值,然后乘以 20 来实现半星评分。

示例代码

<template><el-rate :allow-half="true" :model-value="score" show-score></el-rate></template><script> import { debounce } from 'lodash'; export default {   data() {     return {       score: 0,     };   },   methods: {     handleMouseMove(e) {       const score = e.detAIl.value;       this.score = score * 20;     },   }, }; </script>
登录后复制

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

请登录后发表评论

    暂无评论内容