您的位置: 首页  >  文章  >  评级组件

评级组件

分类: 文章 • 2024-10-14 16:11:04

“★★★★★☆☆☆☆☆”.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组件

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保持统一的参数名，用起来基本一样

配置项

  • 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'));

    评级组件

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

转载：https://zhuanlan.zhihu.com/p/33464317

相关推荐