elementui rate

ElementUI Rate 组件

ElementUI 的 Rate 组件用于评分功能，支持自定义图标、颜色、大小及半选等功能。以下是常见用法及配置方式。

基本用法

默认情况下，Rate 组件显示 5 颗星，用户点击后可选择评分：

<el-rate v-model="value"></el-rate>

export default {
  data() {
    return {
      value: 3 // 默认选中 3 颗星
    }
  }
}

自定义图标

可通过 icon-classes 和 void-icon-class 属性自定义选中和未选中的图标（需配合图标库如 Font Awesome）：

<el-rate
  v-model="value"
  :icon-classes="['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on']"
  void-icon-class="el-icon-star-off"
></el-rate>

允许半选

设置 allow-half 属性后，用户可选择半星：

<el-rate v-model="value" allow-half></el-rate>

自定义颜色

通过 colors 属性设置不同分数的颜色，支持数组或对象格式：

<el-rate v-model="value" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>

禁用状态

设置 disabled 属性可禁用评分交互：

<el-rate v-model="value" disabled></el-rate>

显示辅助文本

通过 texts 属性为不同分数显示文本提示，结合 show-text 启用：

<el-rate
  v-model="value"
  :texts="['差', '一般', '好', '优秀', '极佳']"
  show-text
></el-rate>

事件监听

Rate 组件支持 change 事件，评分变化时触发：

<el-rate v-model="value" @change="handleRateChange"></el-rate>

methods: {
  handleRateChange(val) {
    console.log('当前评分:', val)
  }
}

高级自定义

若需完全自定义评分图标，可使用 scoped slot：

<el-rate v-model="value">
  <template #default="{ index }">
    <i :class="index < value ? 'custom-icon-active' : 'custom-icon'"></i>
  </template>
</el-rate>

注意事项

• 确保 v-model 绑定的值为数字类型。
• 若需动态调整最大分值，使用 max 属性（如 :max="10"）。
• 半选时，分值可能是小数（如 3.5），需根据业务逻辑处理。

通过以上配置，可以灵活实现多样化的评分功能。