Skip to content

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最大分值number5
size尺寸enum
disabled是否为只读booleanfalse
allowHalf是否允许半选booleanfalse
lowThreshold低分和中等分数的界限值, 值本身被划分在低分中number2
highThreshold高分和中等分数的界限值, 值本身被划分在高分中number4
colorsicon 的颜色。 若传入数组,共有 3 个元素,为 3 个分段所对应的颜色;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的颜色object['#f7ba2a', '#f7ba2a', '#f7ba2a']
voidColor未选中 icon 的颜色string#c6d1de
disabledVoidColor只读时未选中 icon 的颜色string#eff2f7
icons图标组件 若传入数组,则需要传入 3 个元素,分别为 3 个部分所对应的类名;若传入对象,则可自定义分段,键名为分段的界限值,键值为对应的类名object[StarFilled, StarFilled, StarFilled]
voidIcon未被选中的图标组件string / ComponentStar
disabledVoidIcon禁用状态的未选择图标string / ComponentStarFilled
showText是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容booleanfalse
showScore是否显示当前分数, show-score 和 show-text 不能同时为真booleanfalse
textColor辅助文字的颜色string''
texts辅助文字数组array['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
scoreTemplate分数显示模板string
clearable是否可以重置值为 0booleanfalse
id原生 id 属性string
ariaLabel和 Rate 的 aria-label 属性保持一致string

Events

事件名描述说明类型
change分值改变时触发Function

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用