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属性以获取实时分数。
此方案需要自行处理事件和数值更新，并可能需要添加防抖/节流机制来优化性能。 代码示例如下(需根据实际情况调整):
{{ percentage }}
重要提示: 直接修改第三方组件源码通常不被推荐。优先考虑利用组件提供的属性和事件来实现需求。 上述方案通过巧妙利用事件监听和计算，在不修改组件源码的前提下实现了百分制评分显示的优化。 选择哪种方案取决于项目的具体需求和复杂度。
