el-rate的使用

最新推荐文章于 2025-01-16 14:27:04 发布

疯魔成佛

最新推荐文章于 2025-01-16 14:27:04 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： VUE ELEMENT 文章标签： el-rate

本文链接：https://blog.youkuaiyun.com/baidu_37198552/article/details/93181297

VUE 同时被 2 个专栏收录

3 篇文章

订阅专栏

ELEMENT

1 篇文章

订阅专栏

这篇博客介绍了在Vue项目中如何使用el-rate组件进行评分功能的实现，包括普通用法、自定义图形以及显示辅助文字等细节，强调了数据绑定的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中使用el-rate实现评分时，有下面几种用法：

1.普通用发

<el-rate
    v-model="value2"
    :colors="colors">
  </el-rate>
  <script>
  export default {
    data() {
      return {
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      }
    }
  }
</script>

2.更换图形

<el-rate    v-model="lightValue"    :icon-classes="iconClasses"    show-score    text-color="#ff9900"    score-template="{value}"></el-rate><script>
  export default {
    data() {
      return {         
      value:null
          colors: ["#99A9BF", "#F7BA2A", "#FF9900"],        
          iconClasses: ["el-icon-sunset", "el-icon-sunrise", "el-icon-sunny"],        
           //iconClasses:{ 2: 'el-icon-sunrise-1', 4: { value: 'el-icon-sunrise-1',  excluded: true }, 5: 'el-icon-sunrise-1' }
      }
    }
  }
</script>

3.显示辅助文字

    <el-rate  v-model="value"  :texts=this.texts  show-text>
    </el-rate>
    <script>
      export default {
        data() {
          return {         
           value:null,
             texts:['极若','较弱','一般','较亮','极亮']
          }
        }
      }
    </script>

注意：对数据的绑定