Rate 评分
基础用法
评分默认被分为三个等级,可以利用颜色数组对分数及情感倾向进行分级(默认情况下不区分颜色)。 三个等级所对应的颜色用 colors
属性设置,而它们对应的两个阈值则通过 low-threshold
和 high-threshold
设定。
允许半选
属性 allowHalf
允许出现半星
辅助文字
用辅助文字直接地表达对应分数
为组件设置 show-text
属性会在右侧显示辅助文字。 通过设置 texts
可以为每一个分值指定对应的辅助文字。 texts
为一个数组,长度应等于最大值 max
。
其它 icon
当有多层评价时,可以用不同类型的 icon
区分评分层级
设置icon-classes
属性可以自定义不同分段的图标。 若传入数组,共有 3 个元素,为 3 个分段所对应的类名;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的类名。 本例还使用 void-icon-class
指定了未选中时的图标类名。
只读
只读的评分用来展示分数, 允许出现半星
为组件设置 disabled
属性表示组件为只读,支持小数分值。 此时若设置 show-score
,则会在右侧显示目前的分值。 可以提供 score-template
作为显示模板,模板为一个包含了 {value} 的字符串,{value} 会被解析为分值。 模板为一个包含了 {value} 的字符串,{value} 会被解析为分值。
自定义样式
element-plus
可以为 rate
组件设置自定义样式。详情
配置选项
Rate
完全继承了 ElRate
的属性 您可以从下面的链接里找到相关文档
typescript
声明
type RateProps = VueProps<typeof ElRate>
export interface VRateItem<T extends object, Key extends DeepKey<T> = DeepKey<T>> extends VBaseItem<T, Key> {
/**
* 类型 rate
*/
/**
* `element-plus ElRate`的属性
*/
props?: VPropDef<T, RateProps>
slots?: {
character?: JSX.Element | { (): JSX.Element }
},
transfer?: VTransfer<Into<T, Key>, string | number>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14