ElementUI Rate 评分

约定不等于承诺〃 2022-08-28 08:50 239阅读 0赞

# 一、概述 #

Rate 评分组件，官方链接：[https://element.eleme.cn/\#/zh-CN/component/rate][https_element.eleme.cn_zh-CN_component_rate]

# 二、辅助文字 #

用辅助文字直接地表达对应分数

test.vue

<template>
      <div style="width: 20%">
        <el-rate
          v-model="value"
          show-text>
        </el-rate>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value: null
          }
        },
        methods: {
        },
      }
    </script>
    
    <style scoped>
    
    </style>

效果如下：

![1531a4a506ed43e4074d30dec7b3ce13.gif][]

在el-rate中有默认的辅助文字\['极差', '失望', '一般', '满意', '惊喜'\]，如果我们想改成更酷的文字，我们需要自定义辅助文字

增加texts属性，完整代码如下：

<template>
      <div style="width: 20%">
        <el-rate
          v-model="value"
          :texts="texts"
          show-text>
        </el-rate>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            texts:['差','一般','好','非常好','非常棒'],
            value: null
          }
        },
        methods: {
        },
      }
    </script>
    
    <style scoped>
    
    </style>

效果如下：

![99f1f32f370b7ea58e85f6c1185febd1.gif][]

本文参考链接：[https://blog.csdn.net/qq\_41883461/article/details/116801582][https_blog.csdn.net_qq_41883461_article_details_116801582]

[https_element.eleme.cn_zh-CN_component_rate]: https://element.eleme.cn/#/zh-CN/component/rate
[1531a4a506ed43e4074d30dec7b3ce13.gif]: /images/20220828/161ef8b079c24462add257ba6139c7e7.png
[99f1f32f370b7ea58e85f6c1185febd1.gif]: /images/20220828/576fd496be7840b7bc67ee275305199e.png
[https_blog.csdn.net_qq_41883461_article_details_116801582]: https://blog.csdn.net/qq_41883461/article/details/116801582

发表评论取消回复

表情：

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

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

相关阅读

相关 3行核心CSS代码的rate评分组件

转自：[http://www.pinlue.com/article/2020/09/1918/3311245254923.html][http_www.pinlue.com_a

心已赠人/ 2022年12月10日 07:05/ 0 赞/ 194 阅读

相关 uni-app rate 评分组件

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

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

相关比赛评分计算

比赛评分计算描述学校举办新生歌手大赛，每个选手的成绩由评委的评分去掉一个最高分和一个最低分剩下评分的平均值得到。‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬

旧城等待，/ 2022年11月10日 10:54/ 0 赞/ 218 阅读

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

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

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

相关 ElementUI Rate 评分

一、概述 Rate 评分组件，官方链接：[https://element.eleme.cn/\/zh-CN/component/rate][https_element.e

约定不等于承诺〃/ 2022年08月28日 08:50/ 0 赞/ 240 阅读

相关 learning rate

本文从梯度学习算法的角度中看学习率对于学习算法性能的影响，以及介绍如何调整学习率的一般经验和技巧。在机器学习中，监督式学习（Supervised Learning）通过定义

素颜马尾好姑娘i/ 2022年06月11日 04:25/ 0 赞/ 177 阅读

相关 fxss-rate评分插件

介绍 fxss-rate评分插件是基于jQuery的插件，支持全星、半星、小数星、未选中星等多种显示样式，并且支持评分操作，不过操作评分的时候仅支持全星评价。 demo

深藏阁楼爱情的钟/ 2022年05月15日 12:34/ 0 赞/ 244 阅读

相关 APP应用评分

示例 ![APP应用评分][APP] /// 应用地址 static NSString const kAppUrl = @"itms-apps://itu

桃扇骨/ 2022年01月20日 13:51/ 0 赞/ 259 阅读

相关 uniapp组件-uni-rate评分

官方示例：[https://ext.dcloud.net.cn/plugin?id=33][https_ext.dcloud.net.cn_plugin_id_33] 评分组

Bertha 。/ 2021年07月25日 11:18/ 1 赞/ 1491 阅读

相关重构-五星评分

动画: 移入到某个星星位置,之前的星星高亮变大,后面的星星暗色不变实现: 动画: (1)通过一个索引,索引值为-1,每

柔情只为你懂/ 2021年07月24日 21:11/ 0 赞/ 458 阅读