事情来源自我的知乎回答---单行写一个评级组件

"★★★★★☆☆☆☆☆".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使用的代码分别如下
  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-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再写把

最后打个广告,欢迎大家关注和支持我在慕课网的实战课程Redux+React Router+Node.js全栈开发实时聊天应用 拜谢