如何用Element UI的el-rate组件实现百分制评分显示？

Element UI el-rate组件百分制评分显示优化方案

Element UI的el-rate组件默认显示五星评分，每颗星代表一分。但实际应用中，我们可能需要将其转换为百分制显示（例如，半颗星代表10分）。本文将探讨如何优化el-rate组件以实现百分制评分显示，并解决一些常见问题。

直接修改max属性为10虽然可以显示10颗星，但与设计初衷不符，而且无法精确显示半星分数。show-text和show-score属性也无法直接满足百分制显示的需求。

简单方案：后端计算

最简单的方案是在用户提交评分后，在后端将分数乘以20转换为百分制再显示。这种方法简单易行，但无法实现鼠标悬停时动态显示百分比。

进阶方案：前端事件监听与计算

为了实现鼠标悬停时动态显示百分比，我们需要监听el-rate组件的@mousemove事件（需使用.native修饰符）。通过该事件获取组件内部的text值，再将其乘以20转换为百分比并显示。同时，需要开启show-score属性以获取实时分数。

此方案需要自行处理事件和数值更新，并可能需要添加防抖/节流机制来优化性能。 代码示例如下(需根据实际情况调整):

<template>  <el-rate    v-model="value"    :allow-half="true"    show-score    @mousemove.native="handleMouseMove"  ></el-rate>  <span>{{ percentage }}</span></template><script>export default {  data() {    return {      value: 0,      percentage: 0    };  },  methods: {    handleMouseMove(event) {      // 获取el-rate组件内部的text值，并进行计算      const rateValue = event.target.innerText;      this.percentage = parseFloat(rateValue) * 20;    }  }};</script>

登录后复制