Element Rate 评分的使用方法

网络编程 2024/12/23 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

组件—评分

基础用法

<div class="block">
 <span class="demonstration">默认不区分颜色</span>
 <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
 <span class="demonstration">区分颜色</span>
 <el-rate
  v-model="value2"
  :colors="colors">
 </el-rate>
</div>

<script>
 export default {
  data() {
   return {
    value1: null,
    value2: null,
    colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
   }
  }
 }
</script>
————————————————
版权声明：本文为CSDN博主「ForeverJPB.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94563654

辅助文字

<div class="block">
 <span class="demonstration">默认不区分颜色</span>
 <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
 <span class="demonstration">区分颜色</span>
 <el-rate
  v-model="value2"
  :colors="colors">
 </el-rate>
</div>

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

其它 icon

<el-rate
 v-model="value"
 :icon-classes="iconClasses"
 void-icon-class="icon-rate-face-off"
 :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>

<script>
 export default {
  data() {
   return {
    value: null,
    iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
   }
  }
 }
</script>

只读

<el-rate
 v-model="value"
 disabled
 show-score
 text-color="#ff9900"
 score-template="{value}">
</el-rate>

<script>
 export default {
  data() {
   return {
    value: 3.7
   }
  }
 }
</script>

Attributes