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. 运行项目