Rate 评分

设置评分。

基础用法

控制台

value:4

查看代码

<template>
	<demo-container class="gov-demo-rate">
		<gov-rate v-model="value" />
		<template #console>value:{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(4);
</script>

设置长度

默认显示 5 个图标，可以设置 max 来指定长度。

控制台

value:4

查看代码

<template>
	<demo-container class="gov-demo-rate">
		<gov-rate v-model="value" :max="10" />
		<template #console>value:{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(4);
</script>

禁用状态

设置 disabled 禁用时其实是“只读模式”。

控制台

value:3

查看代码

<template>
	<demo-container class="gov-demo-rate">
		<gov-rate v-model="value" disabled />
		<template #console>value:{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(3);
</script>

自定义图标

根据插槽自定义图标。

控制台

value:4

查看代码

<template>
	<demo-container class="gov-demo-rate">
		<gov-rate v-model="value">
			<template #icon="{ isActive }">
				<span v-if="isActive">♥</span>
				<span v-else>♡</span>
			</template>
		</gov-rate>
		<template #console>value:{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(4);
</script>

Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定的值，表示当前的评分	Number	—	—
max	最大评分数	Number	—	5
disabled	是否禁用评分	Boolean	true, false	false
iconColor	评分图标的颜色	String	—	#f5a623
triggerForm	是否触发表单验证	Boolean	true, false	true

Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	新的评分值
change	评分改变时触发	新的评分值
focus	组件获得焦点时触发	—
blur	组件失去焦点时触发	—

Slots

插槽名	说明	作用域插槽	内容
icon	自定义评分图标	是	可以自定义评分图标，提供了两个作用域属性：index（当前评分的索引），isActive（当前评分是否被激活）