介绍
用于对事物进行评级操作。
引入
代码演示
基础用法
自定义图标
自定义样式
半星
自定义数量
禁用状态
只读状态
监听 change 事件
API
Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| v-model | 当前分值 | number | - | |
| count | 图标总数 | number 、 string | 5 | |
| size | 图标大小，默认单位为px | number 、 string | 20px | |
| gutter | 图标间距，默认单位为px | number 、 string | 4px | |
| color | 选中时的颜色 | string | #ee0a24 | |
| void-color | 未选中时的颜色 | string | #c8c9cc | |
| disabled-color | 禁用时的颜色 | string | #c8c9cc | |
| icon | 选中时的[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接 | string | star | |
| void-icon | 未选中时的[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接 | string | star-o | |
icon-prefix v2.5.3 | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](https://youzan.github.io/vant/v2/#/zh-CN/icon#props) | string | van-icon | |
| allow-half | 是否允许半选 | boolean | false | |
| readonly | 是否为只读状态 | boolean | false | |
| disabled | 是否禁用评分 | boolean | false | |
| touchable | 是否可以通过滑动手势选择评分 | boolean | true |
Events
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
| change | 当前分值变化时触发的事件 | 当前分值 |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @rate-icon-size | 20px | - | |
| @rate-icon-gutter | @padding-base | - | |
| @rate-icon-void-color | @gray-5 | - | |
| @rate-icon-full-color | @red | - | |
| @rate-icon-disabled-color | @gray-5 | - |
效果图：
