Rate星级评分模块

Rate评星模块可实现等级评星,支持半星,支持自定义图标或图片。

简单使用

对常规节点使用ax-rate属性即可。

  • 输出
  • HTML
  •                 
                    
                

也可以通过id+new的形式创建一个星级评分实例。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    new ax.Rate('#demo0001');
                    
                

设置星星数量

通过参数count可设置星星数量,该参数默认为5

注意,count应该为一个正整数,如果设为浮点数值则会自动抛弃浮点部分。

  • 输出
  • HTML
  •                 
                    
                

基础配置

属性 类型 默认值 说明
name string '' 隐藏input的name属性
value number 0 初始评分值
fill 'value'/'stars' 'value' 填充值类型
heading string '' 左侧主标题
disabled boolean false 是否禁用
readonly boolean false 是否只读
classes string '' 追加样式类

评分配置

属性 类型 默认值 说明
half boolean false 是否支持半星
count number 5 评星总数
increment number 1 单星代表分值
clearable boolean false 是否可清除
highlight boolean false 是否只点亮单个
omitted boolean false 是否忽略灰色星

外观配置

属性 类型 默认值 说明
size 'sm'/'md'/'lg' 'md' 星星尺寸
star string '_icon-star-f' 星星图标类名
type 'icon'/'image' 'icon' 星星图标类型
map array [] 星星对照地图

提示配置

属性 类型 默认值 说明
tooltip.enable boolean false 是否显示气泡
tooltip.format string '{{this.stars}}星,评分:{{this.value}}' 气泡内容格式
result.enable boolean false 是否显示得分
result.format string '{{this.stars}}星' 得分文本格式

标签配置

属性 类型 默认值 说明
label.enable boolean false 是否显示标签
label.format string '' 标签内容格式

回调函数

属性 类型 默认值 说明
onSet function null 设置新值后回调
onChanged function null 值变化后回调
onRestored function null 恢复初始值回调
onCleared function null 清除归零后回调