Rate 评分

用于快速的评价操作，或对评价进行展示。

基本用法

设置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

可以通过 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 />

Attributes

参数	说明	类型	可选值	默认值	最低版本
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	$LOWEST_VERSION$

Events

事件名称	说明	参数	最低版本
change	点击icon，修改分值事件	{ value }	-

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

源代码

文档

• 组件