背景

现在的大多数评分组件是精确到半颗星星的，例如：antd的评分组件

但是如果遇到精确细节的产品，他会要求成这样精确到小数位

大众点评也是这样的

想要做到细致到小数的效果要怎么做呢？我找了大量素材没有找到合适的解决方案，于是决定自己搞下

零·素材准备

• 一个星星的镂空png图像 (因为是透明的，需要的小伙伴查看源代码可见图片)

• 两个设计给你的颜色对比值

• 了解下Css渐变的

壹·逻辑概述

贰·星星评分组件

2.1外部计算组件

根据传入参数计算出满星，小数点星星以及灰色星星的个数
调用星星渲染函数

• 满星则100填充高亮
• 小数点星星传入处理后的渐变百分比
• 灰色星星则无数据传入

2.2 星星填充组件

• 根据出入的数字判断是否使用渐变色
• div checked-star-box 为相对定位，内部元素绝对定位在统一位置
• 利用png的透明属性+z-index设置，底部叠加填充渐变色
  

2.3 使用样式

以下是组件内使用的样式

总结

我刚开始的时候也没有思路，设计也说要不先按半个星星的方案，因为网上大都是半颗星星，我查询了大多的评分方案，或是上层填色位置移动或是jquery实现的半颗星星，，我想着先试试，不行就用半颗星星，经过调研，我观察到进度条是符合小数点的，感觉完全可以按照进度条去做，最后盖个罩子，不给他显示成长方形就行了，根据这个思路，果然实现了小数级别的星星评分，从此经历得出了以下的总结：

• 不要因为设计把自己困在已有的思维里，要打破思维的墙，从不同角度看问题
• 要勇于尝试，你开始去做了，就成功了80%