feat(CheckboxGroup): add direction prop

This commit is contained in:
陈嘉涵
2020-02-10 19:37:52 +08:00
parent 4dd41b23de
commit 15390241d8
12 changed files with 184 additions and 128 deletions
+20 -18
View File
@@ -38,14 +38,6 @@ export default {
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
```
### 禁用文本点击
设置`label-disabled`属性后,点击复选框图标以外的内容不会触发切换
```html
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
```
### 自定义形状
`shape`属性设置为`square`,复选框的形状会变成方形
@@ -95,9 +87,17 @@ export default {
}
```
### 禁用文本点击
设置`label-disabled`属性后,点击图标以外的内容不会触发复选框切换
```html
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
```
### 复选框组
复选框可以与复选框组一起使用,选中值是一个数组,通过`v-model`绑定在`CheckboxGroup`上,数组中的值为选中的复选框的`name`
复选框可以与复选框组一起使用,复选框组通过`v-model`数组绑定复选框的勾选状态
```html
<van-checkbox-group v-model="result">
@@ -117,9 +117,9 @@ export default {
};
```
### 设置最大可选数
### 限制最大可选数
通过`max`属性可以限制最大可选数
通过`max`属性可以限制复选框组的最大可选数
```html
<van-checkbox-group v-model="result" :max="2">
@@ -151,7 +151,6 @@ export default {
result: []
}
},
methods: {
checkAll() {
this.$refs.checkboxGroup.toggleAll(true);
@@ -177,11 +176,7 @@ export default {
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -189,6 +184,12 @@ export default {
```js
export default {
data() {
return {
list: ['a', 'b']
result: []
};
},
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
@@ -219,7 +220,8 @@ export default {
|------|------|------|------|
| v-model (value) | 所有选中项的标识符 | *any[]* | - |
| disabled | 是否禁用所有复选框 | *boolean* | `false` |
| max | 最大可选数,0 为无限制 | *number \| string* | `0` |
| max | 最大可选数,`0`为无限制 | *number \| string* | `0` |
| direction `v2.5.0` | 排列方向,可选值为`horizontal` | *string* | `vertical` |
| icon-size `v2.2.3` | 所有复选框的图标大小,默认单位为`px` | *number \| string* | `20px` |
| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` |