018_ rate

1. rate score

1.1. rate Scoring component .

1.2. Scoring attribute

Parameters	explain	type	The default value is
value / v-model	Binding value	number	0
max	Maximum score	number	5
disabled	Is it read-only	boolean	false
allow-half	Whether half selection is allowed	boolean	false
low-threshold	The limit between low and medium scores , The value itself is divided into low scores	number	2
high-threshold	The limit between high and medium scores , The value itself is divided into high scores	number	4
colors	icon The color of the . If you pass in an array , share 3 Elements , by 3 The color of the segments ; If an object is passed in , Customizable segmentation , The key name is the limit value of the segment , The key value is the corresponding color	array/object	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	Not selected icon The color of the	string	#C6D1DE
disabled-void-color	Not selected when read-only icon The color of the	string	#EFF2F7
icon-classes	icon The name of the class . If you pass in an array , share 3 Elements , by 3 The class name corresponding to the segments ; If an object is passed in , Customizable segmentation , The key name is the limit value of the segment , The key value is the corresponding class name	array/object	['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class	Not selected icon The name of the class	string	el-icon-star-off
disabled-void-icon-class	Not selected when read-only icon The name of the class	string	el-icon-star-on
show-text	Whether to display auxiliary text , If it is true , Will follow texts Select the text content corresponding to the current score in the array	boolean	false
show-score	Whether to display the current score , show-score and show-text Cannot be true at the same time	boolean	false
text-color	Color of auxiliary text	string	#1F2D3D
texts	Auxiliary text array	array	[' range ', ' disappointment ', ' commonly ', ' Satisfied ', ' Pleasantly surprised ']
score-template	Score display template	string	{value}

1.3. Event name

Event name	explain	Callback Arguments
change	Trigger when the score changes	The changed score

2. rate Scoring example

2.1. Use the scaffold to create a new one named element-ui-rate Front end projects , At the same time to install Element plug-in unit .

2.2. To write App.vue 

<template>
  <div id="app">
    <h1> Basic usage </h1>
    <div class="block">
      <span> The default color is not distinguished </span>
      <el-rate v-model="base_value1" :max="10"></el-rate>
    </div>
    <div class="block">
      <span> Distinguish colors </span>
      <el-rate v-model="base_value2" :colors="base_colors"></el-rate>
    </div>

    <h1> Auxiliary text </h1>
    <el-rate v-model="text_value" show-text></el-rate>

    <h1> Other icon</h1>
    <el-rate v-model="icon_value" :icon-classes="iconClasses" void-icon-class="el-icon-more-outline" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>

    <h1> read-only - Half stars are allowed </h1>
    <el-rate v-model="disabled_value" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
  </div>
</template>

<script>
export default {
  data () {
    return {
      base_value1: null,
      base_value2: null,
      base_colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      text_value: null,
      icon_value: null,
      iconClasses: ['el-icon-more', 'el-icon-more', 'el-icon-more'],
      disabled_value: 3.7
    }
  }
}
</script>

2.3. Run the project