★構建東半球最小的評級組件☆

事情來源自我的知乎回答---單行寫一個評級組件

"☆☆☆☆☆".slice(5 - num, 10 - num);

簡單的評級，由於就是字元，所以支持css定義大小，和顏色，大部分需求用這個是能滿足的，但是有些評論表示不能支持小數，比如2.5這種，當時我也沒在意，畢竟一行代碼 不能要求太多 這幾天閑了下來 翻翻知乎以前的回答，覺得可以擴展一下，豐富成一個支持小數，顏色，大小，星星數量，動畫和選擇的rate組件，並且支持vue和react

思路

支持小數其實很簡單，先用☆☆☆☆☆當背景，然後把放在上層，通過控制width+overflow就可以輕鬆支持小數字，不僅僅是2.5, 3.8也支持 畢竟我們寬度用em單位

實現

思路有了，代碼就脫口而出了 html

<div>☆☆☆☆☆</div>

css

div { position:relative;}div::after{ content:; position:absolute; top:0; left:0; width:2.5em; overflow: hidden;}

效果如下

寬度設為其他小數也很easy 比如3.4

潤色一下

加上顏色，動畫什麼的

div { position:relative; color:#f5222d;}div:after{ content:; position:absolute; top:0; left:0; width:0; overflow: hidden; transition: width 2s; -moz-transition: width 2s; -webkit-transition: width 2s; -o-transition: width 2s;}div:hover:after{ width:3.5em;}

功能基本完成 但是鑒於我風騷的性格和方便大家使用，當然是發布到npm上，並且封裝了vue和react的版本

• tiny-rate
• vue-tiny-rate
• react-tiny-rate

tiny-rate

最簡單的，只返回字元，顏色什麼的自己定義把

npm install tiny-rate --save

import rate from tiny-rateconsole.log(tiny(0)) //☆☆☆☆☆console.log(tiny(1)) //☆☆☆☆console.log(tiny(2)) //☆☆☆console.log(tiny(3)) //☆☆console.log(tiny(4)) //☆console.log(tiny(5)) //

vue-tiny-rate

先從npm安裝到項目里

npm install vue-tiny-rate --save

在項目里導入Rate組件

import Rate from vue-tiny-rate;new Vue({ components: { Rate }})

react-tiny-rate

先從npm安裝到項目里

npm install react-tiny-rate --save

在項目里導入Rate組件

import React from react;import ReactDOM from react-dom;import Rate from react-tiny-rateReactDOM.render(<Rate />, document.getElementById(root));

vue和react保持統一的參數名，用起來基本一樣

<Rate />

配置項

• value {number|string}: 評幾星，支持小數默認:0

<Rate value="0.5"></Rate><Rate value="1"></Rate><Rate value="3.6"></Rate>

• readonly {boolean}: 是否是只讀. 默認滑鼠移上去，是有選擇效果的default:false

<Rate value="0.5"></Rate><Rate value="1"></Rate><Rate value="3.6" readonly="true"></Rate>

• length {number|string}: 一共幾個星默認:5

<Rate value="2" length="4"></Rate><Rate value="3.6" length="8"></Rate><Rate value="7.6" length="10"></Rate>

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

<Rate value="4.5">Yellow</Rate><Rate value="4.5" theme="green">Green</Rate><Rate value="4.5" theme="blue">Blue</Rate><Rate value="4.5" theme="red">Red</Rate><Rate value="4.5" theme="purple">Purple</Rate><Rate value="4.5" theme="orange">Orange</Rate><Rate value="4.5" theme="black">Black</Rate><Rate value="4.5" theme="#91d5ff">#91d5ff</Rate>

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

<Rate value="4.5" size=12px>12px</Rate><Rate value="4.5" size=16px>16px</Rate><Rate value="4.5" size=20px>20px</Rate><Rate value="4.5" size=40px>40px</Rate>

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

<Rate value="3.5" animate=1>1s</Rate><Rate value="3.5" animate=2>2s</Rate><Rate value="3.5" animate=3>3s</Rate>

Events

• onRate: 選中星級後的回掉. vue和react使用的代碼分別如下

1. Vue

<Rate @onRate="onrate" :value="value"/>

new Vue({ el: #app, components: { Rate }, template: <Rate @onRate="onrate" :value="value"/>, data: { value: 2.6 }, methods: { onrate (num) { console.log(num) this.value = num } }})

1. React

import React from react;import ReactDOM from react-dom;import Rate from react-tiny-rateclass App extends React.Component{ constructor(props){ super(props) this.state = {value:2.5} this.handleRate = this.handleRate.bind(this) } handleRate(value){ console.log(value) this.setState({ value }) } render(){ return <Rate onRate={this.handleRate} value={this.state.value}>Rate </Rate> }}ReactDOM.render(<App />, document.getElementById(root));

這應該是東半球最小的評級組件了吧 求star關注和試用

• tiny-rate
• vue-tiny-rate
• react-tiny-rate

推薦閱讀：