Rate 评分
规则
js
{
type:"rate",
field:"rate",
title:"推荐级别",
value:3.5,
props:{
max: 10,
},
validate:[
{required:true,type:'number',min:3, message: '请大于3颗星',trigger:'change'}
]
}
完整配置项:Element_Rate
value :Number
Props
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
max | 最大分值 | number | 5 |
size | 尺寸 | enum | — |
disabled | 是否为只读 | boolean | false |
allowHalf | 是否允许半选 | boolean | false |
lowThreshold | 低分和中等分数的界限值, 值本身被划分在低分中 | number | 2 |
highThreshold | 高分和中等分数的界限值, 值本身被划分在高分中 | number | 4 |
colors | icon 的颜色。 若传入数组,共有 3 个元素,为 3 个分段所对应的颜色;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的颜色 | object | ['#f7ba2a', '#f7ba2a', '#f7ba2a'] |
voidColor | 未选中 icon 的颜色 | string | #c6d1de |
disabledVoidColor | 只读时未选中 icon 的颜色 | string | #eff2f7 |
icons | 图标组件 若传入数组,则需要传入 3 个元素,分别为 3 个部分所对应的类名;若传入对象,则可自定义分段,键名为分段的界限值,键值为对应的类名 | object | [StarFilled, StarFilled, StarFilled] |
voidIcon | 未被选中的图标组件 | string / Component | Star |
disabledVoidIcon | 禁用状态的未选择图标 | string / Component | StarFilled |
showText | 是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容 | boolean | false |
showScore | 是否显示当前分数, show-score 和 show-text 不能同时为真 | boolean | false |
textColor | 辅助文字的颜色 | string | '' |
texts | 辅助文字数组 | array | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] |
scoreTemplate | 分数显示模板 | string | |
clearable | 是否可以重置值为 0 | boolean | false |
id | 原生 id 属性 | string | — |
ariaLabel | 和 Rate 的 aria-label 属性保持一致 | string | — |
Events
事件名 | 描述说明 | 类型 |
---|---|---|
change | 分值改变时触发 | Function |