Rate 评分

用于评分打星的组件。

基本用法

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-rate />
  <h4>有默认值（非受控）</h4>
  <i-rate :defaultValue="rate" />
  <h4>有固定值（受控）</h4>
  <i-rate :modelValue="rate" />
  <h4>一般用法</h4>
  <i-rate :modelValue="rate" @change="handleChange" />
  <h4>v-model 用法</h4>
  <i-rate v-model="rate" />
</template>

<script setup>
import { ref } from 'vue'

const rate = ref(3)

const handleChange = (val) => {
  console.log(val)
  rate.value = val
}
</script>

显示代码复制代码复制代码

只读状态

可通过 readonly 属性控制为只读：

<template>
  <i-rate :defaultValue="3" readonly />
</template>

显示代码复制代码复制代码

可清除分值

可通过 allowClear 属性控制为再次点击分值可清除的模式：

<template>
  <i-rate allowClear />
</template>

显示代码复制代码复制代码

半星状态

可通过 allowHalf 属性控制为半星模式：

<template>
  <i-rate allowHalf />
  <br />
  <i-rate
    v-model="rate"
    allowHalf
  />
</template>

<script setup>
import { ref } from 'vue'

const rate = ref(2.5)
</script>

显示代码复制代码复制代码

最大分值

可通过 count 属性控制最大分值：

<template>
  <i-rate :defaultValue="6" :count="10" />
</template>

显示代码复制代码复制代码

自定义颜色

可通过 activeColor 和 voidColor 属性控制选中和未选中颜色：

<template>
  <i-rate :defaultValue="3" activeColor="#427FEA" voidColor="#E06B67" />
</template>

显示代码复制代码复制代码

自定义图标

可通过 activeIcon 和 voidIcon 属性控制选中和未选中颜色：

<template>
  <i-rate :defaultValue="3" activeIcon="BellFill" voidIcon="Bell" />
</template>

显示代码复制代码复制代码

Rate Attributes

属性	说明	类型	默认值
modelValue / v-model	固定分值（受控）	number	--
defaultValue	默认分值（非受控）	number	0
readonly	是否只读	boolean	false
allowClear	是否可清除	boolean	false
allowHalf	是否支持半星	boolean	false
count	最大分值	number	5
activeColor	选中颜色	string	#f5db4d
voidColor	未选中颜色	string	#e5e6ea〡#333336
activeIcon	选中图标	string	StarFill
voidIcon	未选中图标	string	StarFill

Rate Events

属性	说明	类型	默认值
change	选择评分时触发	(val: number) => void	--