Rate 评分

用于对产品、服务、文章内容或交易体验进行星级评分与反馈打分的表单交互控件。

---

代码示例

1. 基础用法 (Basic)

使用 v-model:value 绑定数值，点击星星图标进行打分。

<template>
  <mu-rate v-model:value="rate" />
</template>

<script setup>
import { ref } from 'vue'
const rate = ref(3)
</script>

---

2. 显示评价文案 (Show Text)

设置 show-text 自动展示当所处分级对应的评语提示（如“非常满意”）。

<template>
  <mu-rate v-model:value="rate" show-text />
</template>

---

3. 允许半星评分 (Allow Half)

设置 allow-half 支持 0.5 精度的切分评分。

<template>
  <mu-rate v-model:value="rate" allow-half show-text />
</template>

---

4. 自定义图标数量与尺寸 (Count & Size)

使用 count 自定义图标数量（如 8 星满分），使用 size 与 active-color 自定义尺寸与高亮颜色。

<template>
  <mu-rate v-model:value="rate" :count="8" />
  <mu-rate v-model:value="rate" active-color="#EF4444" :size="40" />
</template>

---

5. 只读展示模式 (Readonly)

设置 readonly 锁定状态只读展示得分，禁止用户交互。

<template>
  <mu-rate :value="4" readonly show-text />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:value	当前评分值 (同 value)	Number	-	0
count	图标总个数	Number	-	5
size	图标尺寸大小	Number | String	-	32
activeColor	选中激活时的颜色	String	-	'#F59E0B'
voidColor	未选中未激活时的背景色	String	-	'#E2E8F0'
allowHalf	是否允许半星选择	Boolean	true | false	false
showText	是否在右侧展示评语提示	Boolean	true | false	false
texts	自定义评语组数组	Array	-	['很差', '较差', '一般', '满意', '非常满意']
readonly	是否只读展示	Boolean	true | false	false
disabled	是否禁用交互	Boolean	true | false	false

---

事件说明 (Events)

事件名	说明	回调参数
change	评分改变时触发	(value: Number)
update:value	分值改变双向更新	(value: Number)

---

插槽说明 (Slots)

插槽名	说明
default	自定义图标或分值右侧后缀节点插槽