简单的评级，由于就是字符，所以支持css定义大小，和颜色，大部分需求用这个是能满足的，但是有些评论表示不能支持小数，比如2.5这种，当时我也没在意，毕竟一行代码 不能要求太多

这几天闲了下来 翻翻知乎以前的回答，觉得可以扩展一下，丰富成一个支持小数，颜色，大小，星星数量，动画和选择的rate组件，并且支持vue和react

思路

支持小数其实很简单，先用☆☆☆☆☆当背景，然后把★★★★★放在上层，通过控制width+overflow就可以轻松支持小数字，不仅仅是2.5, 3.8也支持 毕竟我们宽度用em单位

实现

思路有了，代码就脱口而出了 html

☆☆☆☆☆

css

效果如下

宽度设为其他小数也很easy 比如3.4

润色一下

加上颜色，动画什么的

功能基本完成 但是鉴于我风骚的性格和方便大家使用，当然是发布到npm上，并且封装了vue和react的版本

• tiny-rate

• vue-tiny-rate

• react-tiny-rate

tiny-rate

最简单的，只返回字符，颜色什么的自己定义把

npm install tiny-rate --save

vue-tiny-rate

先从npm安装到项目里

npm install vue-tiny-rate --save

在项目里导入Rate组件

react-tiny-rate

先从npm安装到项目里

npm install react-tiny-rate --save

在项目里导入Rate组件

vue和react保持统一的参数名，用起来基本一样

配置项

• value {number|string}: 评几星，支持小数 默认:0

• readonly {boolean} : 是否是只读. 默认鼠标移上去，是有选择效果的 default:false

• length {number|string}: 一共几个星默认:5

• theme {color|enum(yellow,green,blue,red,purple,orange,black,wihte)}: 主题色.默认: yellow

• size {number|string}: 星星的大小. 注意要带上单位

• animate {number|string}: 是否有动画(秒)default:0

Events

• onRate: 选中星级后的回掉. vue和react使用的代码分别如下

1.Vue

2.React

写完这俩组件，我最大的感受就是，人闲下来真是第一生产力，这应该是东半球最小的评级组件了

至于为什么没有angular4版本的，因为我不会啊 等学了angular4再写把

ITins

看完文章有收获么? 想获取源码吗?

关注ITins->私信我->回复关键字评级组件->即可获得~~~