---
用于快速的评价操作，或对评价进行展示。
设置v-model分数，设置num总分数，默认为5分。
<wd-rate v-model="value" @change="handleChange" />
const value = ref<number>(1)
function changeValue({ value }) {
console.log(value)
}
设置 readonly 属性。
<wd-rate v-model="value" readonly />
设置 disabled 属性和disabled-color
<wd-rate :modelValue="2" disabled />
可以通过 color 属性修改未选中的颜色，active-color 修改选中的颜色。
<wd-rate v-model="value" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" />
<wd-rate v-model="value" :active-color="['linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)', 'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)']" />
可以通过 icon 属性修改未选中的图标，active-icon 修改选中的图标。
<wd-rate v-model="value" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>
可以通过 size 属性修改图标的大小，space 修改图标之间的间隔。
<wd-rate v-model="value" size="30px" space="10px"/>
设置 allowHalf 属性。
<wd-rate v-model="value" allow-half />
设置 clearable 属性，当 clearable 属性设置为 true，再次点击相同的值时，可以将值重置为 0。
<wd-rate v-model="value" clearable />
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|---|
| v-model | 当前分数 | number | - | - | - |
| num | 评分最大值 | number | - | 5 | - |
| readonly | 是否只读 | boolean | - | false | - |
| size | 图标大小 | string | - | 16px | - |
| space | 图标间距 | string | - | 4px | - |
| color | 未选中的图标颜色 | string | - | #E8E8E8 | - |
| active-color | 选中的图标颜色(支持传颜色数组，共有 2 个元素，为 2 个分段所对应的颜色) | string/array | - | linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%) | - |
| icon | 未选中的图标类名 | string | - | wd-icon-star-on | - |
| active-icon | 选中的图标类名 | string | - | wd-icon-star-on | - |
| disabled | 是否禁用 | boolean | - | false | - |
| disabled-color | 禁用的图标颜色 | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
| allow-half | 是否允许半选 | boolean | - | false | 1.7.0 |
| clearable | 是否允许再次点击后清除 | boolean | - | false | 1.13.0 |
| 事件名称 | 说明 | 参数 | 最低版本 |
|---|
| change | 点击icon，修改分值事件 | { value } | - |
| 类名 | 说明 | 最低版本 |
|---|
| custom-class | 根节点样式 | - |