Rate星级评分模块
Rate评星模块可实现等级评星,支持半星,支持自定义图标或图片。
简单使用
对常规节点使用ax-rate属性即可。
也可以通过id+new的形式创建一个星级评分实例。
-
-
-
new ax.Rate('#demo0001');
设置星星数量
通过参数count可设置星星数量,该参数默认为5。
注意,count应该为一个正整数,如果设为浮点数值则会自动抛弃浮点部分。
基础配置
| 属性 |
类型 |
默认值 |
说明 |
| 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 |
清除归零后回调 |