alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(CheckboxGroup): add toggleAll method (#4640)

Browse Source
This commit is contained in:
neverland
2019-09-30 14:47:35 +08:00
committed by GitHub
parent 9a79de0456
commit 1c5463150c
7 changed files with 240 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/checkbox/README.md
+52 -23
View File
@@ -49,7 +49,7 @@ Use icon slot to custom icon
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-checkbox>
```
@@ -59,10 +59,8 @@ export default {
data() {
return {
checked: true,
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
};
}
};
@@ -74,13 +72,9 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
```html
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="item"
:name="item"
>
Checkbox {{ item }}
</van-checkbox>
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
<van-checkbox name="c">Checkbox c</van-checkbox>
</van-checkbox-group>
```
@@ -88,7 +82,6 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b']
};
}
@@ -99,16 +92,44 @@ export default {
```html
<van-checkbox-group v-model="result" :max="2">
<van-checkbox
v-for="(item, index) in list"
:name="item"
:key="item"
>
Checkbox {{ item }}
</van-checkbox>
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
<van-checkbox name="c">Checkbox c</van-checkbox>
</van-checkbox-group>
```
### Toggle All
```html
<van-checkbox-group v-model="result" ref="checkboxGroup">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
<van-checkbox name="c">Checkbox c</van-checkbox>
</van-checkbox-group>
<van-button type="primary" @click="checkAll">Check All</van-button>
<van-button type="info" @click="toggleAll">Toggle All</van-button>
```
```js
export default {
data() {
return {
result: []
}
},
methods: {
checkAll() {
this.$refs.checkboxGroup.toggleAll(true);
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
```
### Inside a Cell
```html
@@ -187,10 +208,18 @@ export default {
| default | Custom label | - |
| icon | Custom icon | checked: whether to be checked |
### Checkbox Methods
### CheckboxGroup Methods
Use ref to get checkbox instance and call instance methods
Use ref to get CheckboxGroup instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| toggle | Toggle check status | - | - |
| toggleAll | Toggle check status of all checkboxes | checked?: boolean | - |
### Checkbox Methods
Use ref to get Checkbox instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| toggle | Toggle check status | checked?: boolean | - |