评分

评分组件。

基础使用

通过 v-model 绑定分数。

<template>
	<pure-rate v-model="score"></pure-rate>
</template>

<script setup>
	import { ref } from "vue";

	const score = ref(4);
</script>

自定义图标

• 通过 icon-name 属性设置未选中时的图标。
• 通过 fill-icon-name 属性设置选中时的图标。

TIP

未选中时的图标和选中时的图标应大小一致，否则会导致图标显示异常。

<template>
	<pure-rate
		v-model="score"
		icon-name="__follow"
		fill-icon-name="__follow-fill"
	></pure-rate>
</template>

滑动选择

通过 touchable 属性设置是否可滑动选择。

<template>
	<pure-rate
		v-model="score"
		touchable
	></pure-rate>
</template>

半星

通过 allow-half 属性设置是否开启半星功能。

<template>
	<pure-rate
		v-model="score"
		allow-half
	></pure-rate>
</template>

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

可清除

通过 clearable 属性设置是否允许再次点击后清除。

<template>
	<pure-rate
		v-model="score"
		clearable
	></pure-rate>
</template>

只读

通过 readonly 属性设置是否只读。

<template>
	<pure-rate
		v-model="score"
		readonly
	></pure-rate>
</template>

禁用

通过 disabled 属性设置是否禁用。

<template>
	<pure-rate
		v-model="score"
		disabled
	></pure-rate>
</template>

自定义数量

通过 count 属性设置评分数量。

<template>
	<pure-rate
		v-model="score"
		:count="10"
	></pure-rate>
</template>

自定义颜色

• 通过 default-color 属性设置未选中图标的颜色。
• 通过 fill-color 属性设置选中图标的颜色。
• 通过 disabled-color 属性设置禁用时图标的颜色。

<template>
	<pure-rate
		v-model="score"
		default-color="blue"
		fill-color="red"
		disabled-color="gray"
	></pure-rate>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
modelValue	Number	0	评分值
count	Number	5	数量
iconName	String	__favorite	未选中时的图标名称
fillIconName	String	__favorite-fill	选中时的图标名称
allowHalf	Boolean	false	是否允许半星
clearable	Boolean	false	是否允许再次点击后清除
touchable	Boolean	true	是否可以通过滑动手势选择评分
disabled	Boolean	false	是否禁用
readonly	Boolean	false	是否只读
defaultColor	String	#000	未选中图标颜色
fillColor	String	#000	选中图标颜色
disabledColor	String	#000	禁用时图标颜色

样式变量

名称	说明
--pure-rate-icon-default-color	未选中图标颜色
--pure-rate-icon-fill-color	选中图标颜色
--pure-rate-icon-disabled-color	禁用时图标颜色
--pure-rate-disabled-opacity	禁用时透明度