★tiny-rate 東半球最小的評級組件☆

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

"★★★★★☆☆☆☆☆".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-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使用的代碼分別以下

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
    }
  }
})
複製代碼

2. 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再寫把

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

最後打個廣告，歡迎你們關注和支持我在慕課網的實戰課程Redux+React Router+Node.js全棧開發實時聊天應用 拜謝