ElementUI Rate 评分

一、概述

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>

效果如下：

 

在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>

效果如下：

 

 

本文参考链接：https://blog.csdn.net/qq_41883461/article/details/116801582