简单的评级,由于就是字符,所以支持css定义大小,和颜色,大部分需求用这个是能满足的,但是有些评论表示不能支持小数,比如2.5这种,当时我也没在意,毕竟一行代码 不能要求太多
这几天闲了下来 翻翻知乎以前的回答,觉得可以扩展一下,丰富成一个支持小数,颜色,大小,星星数量,动画和选择的rate组件,并且支持vue和react
思路支持小数其实很简单,先用☆☆☆☆☆当背景,然后把★★★★★放在上层,通过控制width overflow就可以轻松支持小数字,不仅仅是2.5, 3.8也支持 毕竟我们宽度用em单位
实现思路有了,代码就脱口而出了 html
<div>☆☆☆☆☆</div>
css
效果如下