| 1 | ---
|
| 2 | title: Check 复选项
|
| 3 | preview: https://didi.github.io/mand-mobile/examples/#/check
|
| 4 | ---
|
| 5 |
|
| 6 | ### 引入
|
| 7 |
|
| 8 | ```javascript
|
| 9 | import { Check, CheckBox, CheckGroup, CheckList } from 'mand-mobile'
|
| 10 |
|
| 11 | Vue.component(Check.name, Check)
|
| 12 | Vue.component(CheckBox.name, CheckBox)
|
| 13 | Vue.component(CheckGroup.name, CheckGroup)
|
| 14 | Vue.component(CheckList.name, CheckList)
|
| 15 | ```
|
| 16 |
|
| 17 | ### 代码演示
|
| 18 |
|
| 19 |
|
| 20 | ### API
|
| 21 |
|
| 22 | #### Check Props
|
| 23 | |属性 | 说明 | 类型 | 默认值 | 备注 |
|
| 24 | |----|-----|------|------|------|
|
| 25 | |name|唯一键值|any|`true`|当选中时，双向绑定的值|
|
| 26 | |v-model|选中的值|any|`false`|-|
|
| 27 | |label|选项文案|String|-|-|
|
| 28 | |disabled|是否禁用选择|Boolean|`false`|-|
|
| 29 | |icon|选中项图标名称|String|`checked`|-|
|
| 30 | |icon-inverse|未选中项图标名称|String|`checke`|-|
|
| 31 | |icon-disabled|禁用项选择图标名称|String|`check-disabled`|-|
|
| 32 | |icon-svg<sup class="version-after">2.3.0+</sup>|使用svg图标|Boolean|`false`|-|
|
| 33 | |size|图标大小|String|`md`|-|
|
| 34 |
|
| 35 | ---
|
| 36 |
|
| 37 | #### CheckBox Props
|
| 38 | |属性 | 说明 | 类型 | 默认值 | 备注 |
|
| 39 | |----|-----|------|------|------|
|
| 40 | |name|唯一键值|any|`true`|当选中时，双向绑定的值|
|
| 41 | |v-model|选中的值|any|`false`|-|
|
| 42 | |disabled|是否禁用选择|Boolean|`false`|-|
|
| 43 |
|
| 44 | ---
|
| 45 |
|
| 46 | #### CheckGroup Props
|
| 47 | 复选组，用以选中多个复选项。与`Check`或`CheckBox`组合使用。
|
| 48 |
|
| 49 | |属性 | 说明 | 类型 | 默认值 | 备注 |
|
| 50 | |----|-----|------|------|------|
|
| 51 | |v-model|选中的值|Array|-|-|
|
| 52 | |max|最多选择几个|Number|`0`|0为不限制|
|
| 53 |
|
| 54 | #### CheckGroup Methods
|
| 55 |
|
| 56 | ##### check(name)
|
| 57 |
|
| 58 | |参数 | 说明 | 类型 | 默认值 |
|
| 59 | |----|-----|------|------|
|
| 60 | |name|需要选中的键值|String|-|
|
| 61 |
|
| 62 | ##### uncheck(name)
|
| 63 |
|
| 64 | |参数 | 说明 | 类型 | 默认值 |
|
| 65 | |----|-----|------|------|
|
| 66 | |name|需要去掉的键值|String|-|
|
| 67 |
|
| 68 | ##### toggle(name)
|
| 69 |
|
| 70 | |参数 | 说明 | 类型 | 默认值 |
|
| 71 | |----|-----|------|------|
|
| 72 | |name|需要反选的键值|String|-|
|
| 73 |
|
| 74 | ##### toggleAll(checked?: Boolean)
|
| 75 | 全选或者反选（对`disabled`的选项不改变其原选中状态）<sup class="version-after">2.5.9+</sup>
|
| 76 |
|
| 77 | |参数 | 说明 | 类型 | 默认值 |
|
| 78 | |----|-----|------|------|
|
| 79 | |checked|全选或全不选|Boolean|如果传空，则反选|
|
| 80 |
|
| 81 | ---
|
| 82 |
|
| 83 | #### CheckList Props
|
| 84 | |属性 | 说明 | 类型 | 默认值 | 备注|
|
| 85 | |----|-----|------|------|------|
|
| 86 | |v-model|选中项的`value`|Array|-|-|
|
| 87 | |options|选项数据源|Array<{text, value, disabled, ...}>|`[]`|`disabled`为选项是否禁用|
|
| 88 | |icon<sup class="version-after">2.3.0+</sup>|选中项的图标|String|`checked`|-|
|
| 89 | |icon-inverse<sup class="version-after">2.3.0+</sup>|非选中项的图标|String|`check`|-|
|
| 90 | |icon-disabled<sup class="version-after">2.3.0+</sup>|禁用项的图标|String|`check-disabled`|-|
|
| 91 | |icon-size<sup class="version-after">2.3.0+</sup>|图标大小|String|`md`|-|
|
| 92 | |icon-svg<sup class="version-after">2.3.0+</sup>|使用svg图标|Boolean|`false`|-|
|
| 93 | |icon-position<sup class="version-after">2.3.0+</sup>|图标位置|String|`right`|`left`, `right`|
|
| 94 | |is-slot-scope|是否强制使用或不使用`slot-scope`|Boolean|-|某些情况下需要根据业务逻辑动态确定是否使用，可避免直接组件上加`if/else`|
|
| 95 |
|
| 96 | #### CheckList Slots
|
| 97 | ```html
|
| 98 | <template>
|
| 99 | <md-check-list :options="data">
|
| 100 | <template slot-scope="{ option, index, selected }">
|
| 101 | <div class="custom-title" v-text="option.text"></div>
|
| 102 | <div class="custom-brief">{{ option.text }}的自定义描述</div>
|
| 103 | </template>
|
| 104 | </md-check-list>
|
| 105 | </template>
|
| 106 | ```
|