Source of my answer – write a single line rating component

Painted "u u u u being fostered fostered fostered fostered".slice(5 - num, 10 - num);
Copy the code

Simple ratings, since they are characters, support CSS definition of size and color. Most of the requirements can be met with this, but there are some comments that do not support decimals, such as 2.5, which I didn’t mind at the time, after all, one line of code can not require too much

These days I have time to read zhihu’s previous answers. I think it can be expanded into a component that supports decimals, colors, sizes, star numbers, animations and rate selection, as well as vue and React

Train of thought

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

implementation

With the idea in mind, the code just blurts out HTML

<div>Being fostered fostered fostered fostered</div> 
Copy the code

css


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

Copy the code

Results the following

It’s also easy to set the width to other decimals like 3.4

Polish it

Add color and animation and all that

div {
  position:relative;
  color:#f5222d;
}
div:after{
  content:'u u u u u';
  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.5 em;
}

Copy the code

The function is basically complete, but in view of my sexy personality and easy to use, of course, it is released to NPM, and encapsulates vue and React versions

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

tiny-rate

The simplest, only return character, color of what to define their own

npm install tiny-rate --save
Copy the code
import rate from 'tiny-rate'
console.log(tiny(0)) / / being is being fostered fostered fostered
console.log(tiny(1)) / / u being fostered fostered fostered
console.log(tiny(2)) Painted painted / / being is being fostered
console.log(tiny(3)) Painted painted / / u do do
console.log(tiny(4)) / / u u u u do
console.log(tiny(5)) / / u u u u u

Copy the code

vue-tiny-rate

First install from NPM into the project

npm install vue-tiny-rate --save
Copy the code

Import the Rate component into your project

import Rate from 'vue-tiny-rate';

new Vue({
    components: {
        Rate
    }
})
Copy the code

react-tiny-rate

First install from NPM into the project

npm install react-tiny-rate --save
Copy the code

Import the Rate component into your project

import React from 'react';
import ReactDOM from 'react-dom';
import Rate from 'react-tiny-rate'

ReactDOM.render(<Rate />, document.getElementById('root'));
Copy the code

Vue and React use the same parameter names

<Rate />
Copy the code

Configuration items

  • value {number|string}: Rating several stars, supporting decimalsDefault: 0
<Rate value="0.5"></Rate>
<Rate value="1"></Rate>
<Rate value="3.6"></Rate>
Copy the code

  • readonly {boolean}: Indicates whether it is read-only. Default mouse move up, there is a selection of the effectdefault:false
<Rate value="0.5"></Rate>
<Rate value="1"></Rate>
<Rate value="3.6" readonly="true"></Rate>
Copy the code

  • length {number|string}: How many stars are thereDefault: 5
<Rate value="2" length="4"></Rate>
<Rate value="3.6" length="8"></Rate>
<Rate value="7.6" length="10"></Rate>
Copy the code

  • theme {color|enum('yellow','green','blue','red','purple','orange','black','wihte')}: Theme color.By default, 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>

Copy the code

  • size {number|string}: The size of a star. Make sure you bring units with you
<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>
Copy the code

  • animate {number|string}: Whether there is animation (seconds)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>
Copy the code

Events

  • onRateVue and React use the following codes
  1. Vue
<Rate @onRate="onrate" :value="value"/>
Copy the code
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
    }
  }
})
Copy the code
  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'));

Copy the code

After writing these two components, my biggest feeling is that people are really the first productivity when they are free. This should be the smallest rating component in the Eastern hemisphere

As for why there is no Angular4 version, because I won’t write it when I learn Angular4

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

Redux+React Router+Node.js, a full-stack real-time chat application. Thanks