Element el-rate 评分组件详解

点此查看全部文字教程、视频教程、源代码

1. 前言

评分组件主要使用在客户评价场景，例如客户对店铺进行打分。

本篇来介绍下评分组件的用法。

2. 基本用法

	基本用法:{{value1}}
    <el-rate v-model="value1" @change="rateChange">
    </el-rate>

  methods: {
    rateChange(value) {
      console.log(value);
    }
  }

如上代码，评分组件绑定value1，且评分值变化时会触发rateChange方法。效果如下：

3. 显示分值

通过show-score属性可以显示选中的分值：

 	显示分值:
    <el-rate v-model="value2" :show-score="true">
    </el-rate>

效果如下：

4. 辅助文本

通过show-text属性可以显示辅助文本，具体辅助文本的文字内容由texts属性控制。

	辅助文本:
    <el-rate v-model="value3" :show-text="true" :texts="texts">
    </el-rate>

texts: ['不合格', '合格', '良好', '优秀', '非常优秀']

效果如下：

5. 只读

为组件添加disabled属性，即可转换为只读，此时无法修改评分组件的值。

  	只读：
    <el-rate v-model="value4" disabled :show-score="true">
    </el-rate>

效果如下，右边三个星号是灰色的无法点击。

6. 小结

评分组件比较简单。