Skip to content
On this page

Rate 评分

基本用法

设置v-model分数,设置num总分数,默认为5分。

html
<wd-rate v-model="value" @change="handleChange" />
typescript
const value = ref<number>(1)

function changeValue({ value }) {
  console.log(value)
}

只读

设置 readonly 属性。

html
<wd-rate v-model="value" readonly />

禁用

设置 disabled 属性和disabled-color

html
<wd-rate :modelValue="2" disabled />

修改颜色

可以通过 color 属性修改未选中的颜色,active-color 修改选中的颜色。

html
<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 修改选中的图标。

html
<wd-rate v-model="value" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>

修改大小、间隔

可以通过 size 属性修改图标的大小,space 修改图标之间的间隔。

html
<wd-rate v-model="value" size="30px" space="10px"/>

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%)-
nameform 表单中的字段名string---

Events

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

外部样式类

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

Released under the MIT License.

Released under the MIT License.