ElementUI Rate 评分

约定不等于承诺〃 2022-08-28 08:50 225阅读 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