Checklist 组件使用教程
优质
小牛编辑
127浏览
2023-12-01
安装
import { Checklist } from 'vux'
export default {
components: {
Checklist
}
}// 在入口文件全局引入
import Vue from 'vue'
import { Checklist } from 'vux'
Vue.component('checklist', Checklist)
从 v2.6.2 开始，max=1即为单选模式，不会要求先取消上一个选中的才能选中下一个值。
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | array | [] | 表单值 | -- |
| title | string | 标题 | -- | |
| required | boolean | false | 是否为必选 | -- |
| options | array | [] | 选项列表，可以为[{key:'name',value:'value',inlineDesc:'inlineDesc'}]的形式 | -- |
| max | number | 最多可选个数 | -- | |
| min | number | 最少可选个数 | -- | |
| random-order | boolean | false | 是否随机打乱选项顺序 | -- |
| check-disabled | boolean | true | 是否进行可选检测，默认情况下当选择个数等于可选个数(max)时，其他项不可选择。该选项主要适用于从多个选项列表中收集值的场景。注意的该选项设为 false 时 max 设置将失效。 | v2.2.1-rc.1 |
| label-position | string | right | label 位置，可以设置为 left 或者 right | v2.2.1-rc.4 |
| disabled | string | 是否禁用操作 | v2.3.8 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (value, label) | 值变化时触发，参数为 (value, label)，其中 label 参数在 v2.5.7 后支持 | -- |
方法
| 名字 | 参数 | 说明 | 版本要求 |
| getFullValue | 获取值和对应的显示文字 | v2.6.4 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @checklist-icon-active-color | #09BB07 | -- |