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