018_rate评分

1. rate评分

1.1. rate评分组件。

1.2. 评分属性

参数	说明	类型	默认值
value / v-model	绑定值	number	0
max	最大分值	number	5
disabled	是否为只读	boolean	false
allow-half	是否允许半选	boolean	false
low-threshold	低分和中等分数的界限值, 值本身被划分在低分中	number	2
high-threshold	高分和中等分数的界限值, 值本身被划分在高分中	number	4
colors	icon的颜色。若传入数组, 共有3个元素, 为3个分段所对应的颜色; 若传入对象, 可自定义分段, 键名为分段的界限值, 键值为对应的颜色	array/object	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	未选中icon的颜色	string	#C6D1DE
disabled-void-color	只读时未选中icon的颜色	string	#EFF2F7
icon-classes	icon的类名。若传入数组, 共有3个元素, 为3个分段所对应的类名; 若传入对象, 可自定义分段, 键名为分段的界限值, 键值为对应的类名	array/object	['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class	未选中icon的类名	string	el-icon-star-off
disabled-void-icon-class	只读时未选中icon的类名	string	el-icon-star-on
show-text	是否显示辅助文字, 若为真, 则会从texts数组中选取当前分数对应的文字内容	boolean	false
show-score	是否显示当前分数, show-score和show-text不能同时为真	boolean	false
text-color	辅助文字的颜色	string	#1F2D3D
texts	辅助文字数组	array	['极差', '失望', '一般', '满意', '惊喜']
score-template	分数显示模板	string	{value}

1.3. 事件名称

事件名称	说明	回调参数
change	分值改变时触发	改变后的分值

2. rate评分例子

2.1. 使用脚手架新建一个名为element-ui-rate的前端项目, 同时安装Element插件。

2.2. 编写App.vue 

<template>
  <div id="app">
    <h1>基础用法</h1>
    <div class="block">
      <span>默认不区分颜色</span>
      <el-rate v-model="base_value1" :max="10"></el-rate>
    </div>
    <div class="block">
      <span>区分颜色</span>
      <el-rate v-model="base_value2" :colors="base_colors"></el-rate>
    </div>

    <h1>辅助文字</h1>
    <el-rate v-model="text_value" show-text></el-rate>

    <h1>其它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>只读-允许出现半星</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. 运行项目