Rate

Used for quick evaluation or displaying rating results.

Component Types

Basic Usage

Set v-model to bind the current score, num is used to set the total score, default is 5.

<wd-rate v-model="value" @change="handleChange" />

const value = ref(5)

function handleChange({ value }: { value: number }) {
  console.log(value)
}

Component States

Read-only

Set the readonly property.

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

Disabled

Set the disabled property.

<wd-rate v-model="value" disabled />

Component Styles

Modify Selected Color

You can modify the selected icon color through active-color, and also support passing in a two-color array to achieve segmented colors.

<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%)'
  ]"
/>

Modify Icon and Color

You can set unselected and selected icons through icon and active-icon respectively, and customize the visual style in combination with active-color.

<wd-rate v-model="value" block icon="Fire" active-icon="Fire" active-color="var(--wot-red-6)" />
<wd-rate v-model="value" block icon="thumb-down-fill" active-icon="thumb-up-fill" active-color="var(--wot-green-6)" />

Modify Size and Spacing

Modify icon size through size, and icon spacing through space.

<wd-rate v-model="value" size="36" space="12px" />

Special Styles

Allow Half Selection

Set the allow-half property.

<wd-rate v-model="value" allow-half />

Allow Clearing Rating

After setting the clearable property, clicking the current minimum score again can clear the rating. When combined with allow-half, half-star ratings can be cleared.

<wd-rate v-model="value" clearable />
<wd-rate v-model="value" clearable allow-half />

Attributes

Parameter	Description	Type	Default Value
v-model	Current score	number | null	null
num	Maximum rating value	number	5
readonly	Whether read-only	boolean	false
size	Icon size	string	-
space	Icon spacing	string | number	-
color	Unselected icon color	string	-
active-color	Selected icon color, supports string or string[]	string | string[]	-
icon	Unselected icon class name	string	'star-fill'
active-icon	Selected icon class name	string	'star-fill'
disabled	Whether disabled	boolean	false
allow-half	Whether to allow half selection	boolean	false
clearable	Whether to allow clearing after clicking again	boolean	false
block	Whether to display as block	boolean	false
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Events

Event Name	Description	Parameters
change	Triggered when clicking the icon to modify the score	{ value }

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-rate-color	$filled-extra-strong	未激活图标颜色
--wot-rate-active-color	$classifyapplication-yellow-content	激活图标颜色
--wot-rate-size	$n-24	图标尺寸
--wot-rate-disabled-opacity	$opacity-disabled	禁用态透明度
--wot-rate-item-space	$spacing-extra-tight	图标间距

Source Code

Documentation

• Component