Rate 评分

评分组件，支持半选、自定义图标、辅助文字等功能。

基础用法

最基础的用法，通过 v-model 绑定值。

很好

<template>
  <ZcRate v-model="value1" />
  <ZcRate v-model="value2" disabled show-text :texts="['很差', '一般', '不错', '很好', '非常好']" />
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref(3)
const value2 = ref(4)
</script>

半选与辅助文字

设置 allow-half 开启半选，show-text 显示辅助文字。

一般

<template>
  <ZcRate v-model="value" allow-half show-text />
</template>
<script setup>
import { ref } from 'vue'
const value = ref(2.5)
</script>

其他属性

通过设置不同属性展示不同效果的评分。

显示分数：

3.7 分

自定义颜色：

只读：

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div>
      <span style="margin-right: 16px;">显示分数：</span>
      <ZcRate v-model="value1" show-score score-template="{value} 分" />
    </div>
    <div>
      <span style="margin-right: 16px;">自定义颜色：</span>
      <ZcRate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
    </div>
    <div>
      <span style="margin-right: 16px;">只读：</span>
      <ZcRate v-model="value3" readonly />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref(3.7)
const value2 = ref(4)
const value3 = ref(5)
</script>

Rate API

Props

参数	说明	类型	默认值
modelValue	绑定值	number	0
max	最大分值	number	5
size	尺寸	'large' | 'medium' | 'small'	'medium'
disabled	是否为只读	boolean	false
allowHalf	是否允许半选	boolean	false
lowThreshold	低分和中等分数的界限值	number	2
highThreshold	中等分数和高分的界限值	number	4
colors	图标颜色数组	string[]	['#F7BA2A', '#F7BA2A', '#F7BA2A']
voidColor	未选中图标颜色	string	'#C6D1DE'
disabledVoidColor	禁用时未选中颜色	string	'#EFF2F7'
showText	是否显示辅助文字	boolean	false
showScore	是否显示当前分数	boolean	false
textColor	辅助文字颜色	string	''
texts	辅助文字数组	string[]	['极差','失望','一般','满意','惊喜']
scoreTemplate	分数显示模板	string	'{value}'
clearable	是否可以再次点击清除	boolean	false
readonly	是否只读	boolean	false

Events

事件名	说明	回调参数
change	评分变化时触发	(value: number, oldValue: number)