Rate评价

基础用法

通过将type属性的值指定为rate

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '评价',
          prop: 'rate',
          type: 'rate',
        }, {
          label: '评价',
          prop: 'rate',
          type: 'rate',
          colors: ['#99A9BF', '#F7BA2A', '#FF9900']
        }]
      }
    };
  }
}
</script>
显示代码

辅助文字

用辅助文字直接地表达对应分数

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '评价',
          prop: 'rate',
          type: 'rate',
          showText: true,
          texts: ['极差', '失望', '一般', '满意', '惊喜'],
        }]
      }
    };
  }
}
</script>
显示代码

自定义图标

当有多层评价时,可以用不同类型的 icon 区分评分层级

设置iconClasses属性可以自定义不同分段的图标。若传入数组,共有 3 个元素,为 3 个分段所对应的类名;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的类名。本例还使用voidIconClass指定了未选中时的图标类名。

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '评价',
          prop: 'rate',
          type: 'rate',
          iconClasses: ['el-icon-circle-close', 'el-icon-remove', 'el-icon-circle-plus'],
          voidIconClass: "el-icon-circle-plus-outline"
        }]
      }
    };
  }
}
</script>
显示代码

自定义个数

长度应等于最大值max

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '评价',
          prop: 'rate',
          type: 'rate',
          max: 40
        }]
      }
    };
  }
}
</script>
显示代码

只读

只读的评分用来展示分数,允许出现半星

为组件设置 disabled 属性表示组件为只读,支持小数分值。此时若设置 showScore,则会在右侧显示目前的分值。可以提供 scoreTemplate 作为显示模板,模板为一个包含了 {value} 的字符串,{value} 会被解析为分值。

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '评价',
          prop: 'rate',
          type: 'rate',
          value: 3.7,
          disabled: true,
          showScore: true,
          scoreTemplate: "{value}"
        }]
      }
    };
  }
}
</script>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档