Element el-rate 评分组件详解

比眉伴天荒 2022-09-16 04:45 519阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 基本用法
 *  3. 显示分值
 *  4. 辅助文本
 *  5. 只读
 *  6. 小结

# 1. 前言 #

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

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

# 2. 基本用法 #

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

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

如上代码，评分组件绑定value1，且评分值变化时会触发rateChange方法。效果如下：  
![在这里插入图片描述][8f3152a80a824b8498031ecd6c202cd8.png]

# 3. 显示分值 #

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

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

效果如下：  
![在这里插入图片描述][250d7e4530fb483ebdc9c1d0c7c98cb6.png]

# 4. 辅助文本 #

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

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

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

效果如下：  
![在这里插入图片描述][b41913096c924c0fbac3d897a6b89c37.png]

# 5. 只读 #

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

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

效果如下，右边三个星号是灰色的无法点击。  
![在这里插入图片描述][43702f21a2b64f5bbdef5fd9f80396e2.png]

# 6. 小结 #

评分组件比较简单。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[8f3152a80a824b8498031ecd6c202cd8.png]: /images/20220828/b3d47cdec2514ae695bc02ecc004f028.png
[250d7e4530fb483ebdc9c1d0c7c98cb6.png]: /images/20220828/ac4868a5aef74560878d2f0488f37036.png
[b41913096c924c0fbac3d897a6b89c37.png]: /images/20220828/9e3008d337ed41c4a53ac642b0a87058.png
[43702f21a2b64f5bbdef5fd9f80396e2.png]: /images/20220828/d0584e43098b46a681ea5ec184e9f3cb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，519人围观）

还没有评论，来说两句吧...

相关阅读

相关 Solr——自定义评分组件

solr-custom-score solr自定义评分组件demo （一）背景介绍大多数时候我们使用lucene/solr/elasticsearch自带的评分

骑猪看日落/ 2023年06月02日 07:49/ 0 赞/ 36 阅读

相关 Vue 星级评分组件

Vue 星级评分组件描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctr

向右看齐/ 2023年02月13日 11:30/ 0 赞/ 39 阅读

相关 Element el-button 按钮组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按

今天药忘吃喽~/ 2023年01月12日 01:48/ 0 赞/ 353 阅读

相关 Element el-icon 图标组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 使用方式 3. 图标列表 1. 背景使用图标可以使我

向右看齐/ 2023年01月11日 16:21/ 0 赞/ 399 阅读

相关 Element el-row el-col 布局组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对

古城微笑少年丶/ 2023年01月11日 15:27/ 0 赞/ 205 阅读

相关 Element el-container 布局容器组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 全局样式 3. 布局代码 4. 增加导航菜单 5.

谁借莪１个温暖的怀抱￠/ 2022年11月19日 07:51/ 0 赞/ 345 阅读

相关 uni-app rate 评分组件

使用方法直接使用`<uni-rate>`组件即可. 参考 1. [Rate评分(支持滑选) - DCloud 插件市场][Rate_ - DCloud]

谁践踏了优雅/ 2022年11月18日 01:16/ 0 赞/ 343 阅读

相关 React 封装星星评分组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

悠悠/ 2022年10月06日 11:58/ 0 赞/ 256 阅读

相关 Element el-rate 评分组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 前言 2. 基本用法 3. 显示分值 4. 辅助文本 5. 只

比眉伴天荒/ 2022年09月16日 04:45/ 0 赞/ 520 阅读

相关在屏幕中使用评分组件

在Android系统中,评分组件RatingBar的功能是为用户提供一个评分操作的模式,在日常应用中,经常见到评分系统使用RatingBar控件流程 (1)在布局文件中定

浅浅的花香味﹌/ 2022年06月15日 04:16/ 0 赞/ 203 阅读