评分（Rate）

Element-UI 的评分组件用于展示和输入评分，支持自定义最大分值、颜色、图标样式等。

提示

评分（Rate）组件官方文档：https://element.eleme.cn/#/zh-CN/component/rate (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-rate> 标签创建评分组件，通过 v-model 绑定评分值。

<template>
  <el-rate v-model="rating"></el-rate>
</template>

<script>
export default {
  data() {
    return {
      rating: 3 // 初始评分值
    };
  }
};
</script>

• v-model 绑定：评分组件的值通过 v-model 与 rating 绑定。当用户改变评分时，rating 会自动更新。
• 

Rate 属性

参数	说明	类型	可选值	默认值
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 的颜色	array/object	—	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	未选中 icon 的颜色	string	—	#C6D1DE
disabled-void-color	只读时未选中 icon 的颜色	string	—	#EFF2F7
icon-classes	icon 的类名	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	是否显示辅助文字	boolean	—	false
show-score	是否显示当前分数，show-score 和 show-text 不能同时为真	boolean	—	false
text-color	辅助文字的颜色	string	—	#1F2D3D
texts	辅助文字数组	array	—	['极差', '失望', '一般', '满意', '惊喜']
score-template	分数显示模板	string	—	{value}

Rate 事件

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

2. 评分组件示例

基础评分组件

<template>
  <el-rate v-model="rating"></el-rate>
</template>

<script>
export default {
  data() {
    return {
      rating: 3 // 初始评分值
    };
  }
};
</script>

自定义最大分值和辅助文字

<template>
  <el-rate
    v-model="rating"
    :max="10"
    show-text
    :texts="['极差', '失望', '一般', '满意', '惊喜', '非常满意', '极好', '优秀', '卓越', '完美']"
  ></el-rate>
</template>

<script>
export default {
  data() {
    return {
      rating: 6 // 初始评分值
    };
  }
};
</script>

• 自定义最大分值：通过 max 属性设置评分的最大值，这里设置为 10。
• 辅助文字：通过 show-text 属性显示辅助文字，并通过 texts 属性自定义每个评分对应的文字。
• 

自定义颜色和图标

<template>
  <el-rate
    v-model="rating"
    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
    :icon-classes="['el-icon-sunny', 'el-icon-sunny', 'el-icon-sunny']"
    :void-icon-class="'el-icon-circle-check-outline'"
    :disabled-void-icon-class="'el-icon-circle-close-outline'"
  ></el-rate>
</template>

<script>
export default {
  data() {
    return {
      rating: 3 // 初始评分值
    };
  }
};
</script>

• 自定义颜色：通过 colors 属性设置评分图标的颜色，数组中的三个颜色分别代表低、中、高三个评分段。
• 自定义图标：通过 icon-classes 属性设置评分图标的类名，数组中的三个类名分别代表低、中、高三个评分段。
• 未选中图标：通过 void-icon-class 和 disabled-void-icon-class 属性设置未选中和只读时未选中图标的类名。

显示分数

<template>
  <el-rate v-model="rating" show-score></el-rate>
</template>

<script>
export default {
  data() {
    return {
      rating: 4 // 初始评分值
    };
  }
};
</script>

• 显示分数：通过 show-score 属性显示当前评分的分数。
• 

总结

• 灵活的属性配置：通过 max、colors、icon-classes 等属性可以自定义评分组件的行为和样式。
• 丰富的事件处理：支持 change 事件，允许开发者在评分值变化时进行自定义处理。
• 多样的展示方式：支持显示辅助文字和分数，通过 show-text 和 show-score 属性进行配置。