<el-rate> 评分自定义图

自定义图片

image.png

根据选中的多少，展示不同的图片

image.png

<template>
     <el-rate
        v-model="rateValue1"
        :icon-classes="['custom-icon-1', 'custom-icon-2', 'custom-icon-3']"
        void-icon-class="custom-icon-void"
      >
      </el-rate>

      <el-rate
        v-model="rateValue2"
        show-text
        :texts="['很差', '较差', '一般', '不错', '很棒']"
        :icons="[
          'el-icon-frown',
          'el-icon-frown',
          'el-icon-meh',
          'el-icon-smile',
          'el-icon-star-on',
        ]"
        :colors="['#99A9BF', '#F7BA2A', '#FF9900', 'red', 'purple']"
      ></el-rate>

      <el-rate
        v-model="rateValue3"
        :texts="['很差', '较差', '一般', '不错', '很棒']"
        show-text
      ></el-rate>

      <el-rate v-model="rateValue4" :max="6">
        <template #default="{ index }">
          {{ ["很差", "差", "一般", "好", "很好", "极好"][index] }}
        </template>
      </el-rate>
    </div>
</template>

 data() {
    return {
      rateValue1: 2,
      rateValue2: 4,
      rateValue3: 2,
      rateValue4: 5,
      customIcons: [
        "el-icon-circle-close",
        "el-icon-minus",
        "el-icon-circle-check",
      ],
      iconClasses: ["icon-rate-face-1", "icon-rate-face-2", "icon-rate-face-3"],
      texts: ["很垃圾", "垃圾", "还行", "漂亮", "五星好评"],
}
}

<style scoped>

::v-deep .custom-icon-1 {
  background: url("url");
  background-size: cover;
  width: 20px;
  height: 20px;
  display: inline-block;
}

::v-deep .custom-icon-2 {
  background: url("url");
  background-size: cover;
  width: 20px;
  height: 20px;
  display: inline-block;
}

::v-deep .custom-icon-3 {
  background: url("url");
  background-size: cover;
  width: 20px;
  height: 20px;
  display: inline-block;
}

::v-deep .custom-icon-void {
  background: url("url");
  background-size: cover;
  width: 20px;
  height: 20px;
  display: inline-block;
  opacity: 0.5;
}
</style>