事情來源自我的知乎回答---單行寫一個評級元件
"★★★★★☆☆☆☆☆".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
最簡單的，只返回字元，顏色什麼的自己定義把
npm install tiny-rate --save
複製程式碼import rate from 'tiny-rate'
console.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-rate'
ReactDOM.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使用的程式碼分別如下
- 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
}
}
})
複製程式碼- React
import React from 'react';
import ReactDOM from 'react-dom';
import Rate from 'react-tiny-rate'
class 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和試用
至於為什麼沒有angular4版本的，因為我不會啊 等我學了angular4再寫把