blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 240 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/checkbox-group/index.js
View File

@ -23,6 +23,14 @@ export default createComponent({
} }
}, },
methods: {
toggleAll(checked) {
this.children.forEach(item => {
item.toggle(checked);
});
}
},
render() { render() {
return <div class={bem()}>{this.slots()}</div>; return <div class={bem()}>{this.slots()}</div>;
} }

75
src/checkbox/README.md
View File

@ -49,7 +49,7 @@ Use icon slot to custom icon
<img <img
slot="icon" slot="icon"
slot-scope="props" slot-scope="props"
:src="props.checked ? icon.active : icon.inactive" :src="props.checked ? activeIcon : inactiveIcon"
> >
</van-checkbox> </van-checkbox>
``` ```
@ -59,10 +59,8 @@ export default {
data() { data() {
return { return {
checked: true, checked: true,
icon: { activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
active: 'https://img.yzcdn.cn/vant/user-active.png', inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
inactive: '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 ```html
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
<van-checkbox <van-checkbox name="a">Checkbox a</van-checkbox>
v-for="(item, index) in list" <van-checkbox name="b">Checkbox b</van-checkbox>
:key="item" <van-checkbox name="c">Checkbox c</van-checkbox>
:name="item"
>
Checkbox {{ item }}
</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
``` ```
@ -88,7 +82,6 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
export default { export default {
data() { data() {
return { return {
list: ['a', 'b', 'c'],
result: ['a', 'b'] result: ['a', 'b']
}; };
} }
@ -99,16 +92,44 @@ export default {
```html ```html
<van-checkbox-group v-model="result" :max="2"> <van-checkbox-group v-model="result" :max="2">
<van-checkbox <van-checkbox name="a">Checkbox a</van-checkbox>
v-for="(item, index) in list" <van-checkbox name="b">Checkbox b</van-checkbox>
:name="item" <van-checkbox name="c">Checkbox c</van-checkbox>
:key="item"
>
Checkbox {{ item }}
</van-checkbox>
</van-checkbox-group> </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 ### Inside a Cell
```html ```html
@ -187,10 +208,18 @@ export default {
| default | Custom label | - | | default | Custom label | - |
| icon | Custom icon | checked: whether to be checked | | 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 | | 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 | - |

87
src/checkbox/README.zh-CN.md
View File

@ -31,12 +31,16 @@ export default {
### 禁用状态 ### 禁用状态
通过设置`disabled`属性可以禁用复选框
```html ```html
<van-checkbox v-model="checked" disabled>复选框</van-checkbox> <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
``` ```
### 自定义颜色 ### 自定义颜色
通过`checked-color`属性可以自定义选中状态下的图标颜色
```html ```html
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox> <van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
``` ```
@ -51,7 +55,7 @@ export default {
<img <img
slot="icon" slot="icon"
slot-scope="props" slot-scope="props"
:src="props.checked ? icon.active : icon.inactive" :src="props.checked ? activeIcon : inactiveIcon"
> >
</van-checkbox> </van-checkbox>
``` ```
@ -60,27 +64,21 @@ export default {
export default { export default {
data() { data() {
checked: true, checked: true,
icon: { activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
active: 'https://img.yzcdn.cn/vant/user-active.png', inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
} }
} }
``` ```
### 复选框组 ### 复选框组
与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值 复选框可以与复选框组一起使用，选中值是一个数组，通过`v-model`绑定在`CheckboxGroup`上，数组中的值为选中的复选框的`name`
```html ```html
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
<van-checkbox <van-checkbox name="a">复选框 a</van-checkbox>
v-for="(item, index) in list" <van-checkbox name="b">复选框 b</van-checkbox>
:key="item" <van-checkbox name="c">复选框 c</van-checkbox>
:name="item"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
``` ```
@ -88,7 +86,6 @@ export default {
export default { export default {
data() { data() {
return { return {
list: ['a', 'b', 'c'],
result: ['a', 'b'] result: ['a', 'b']
}; };
} }
@ -97,21 +94,53 @@ export default {
### 设置最大可选数 ### 设置最大可选数
通过`max`属性可以限制最大可选数
```html ```html
<van-checkbox-group v-model="result" :max="2"> <van-checkbox-group v-model="result" :max="2">
<van-checkbox <van-checkbox name="a">复选框 a</van-checkbox>
v-for="(item, index) in list" <van-checkbox name="b">复选框 b</van-checkbox>
:key="item" <van-checkbox name="c">复选框 c</van-checkbox>
:name="item"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
``` ```
### 全选与反选
通过`CheckboxGroup`实例上的`toggleAll`方法可以实现全选与反选
```html
<van-checkbox-group v-model="result" ref="checkboxGroup">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
<van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>
<van-button type="primary" @click="checkAll">全选</van-button>
<van-button type="info" @click="toggleAll">反选</van-button>
```
```js
export default {
data() {
return {
result: []
}
},
methods: {
checkAll() {
this.$refs.checkboxGroup.toggleAll(true);
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
```
### 搭配单元格组件使用 ### 搭配单元格组件使用
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换 此时你需要再引入`Cell`和`CellGroup`组件，并通过`Checkbox`实例上的 toggle 方法触发切换
```html ```html
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
@ -189,10 +218,18 @@ export default {
| default | 自定义文本 | - | | default | 自定义文本 | - |
| icon | 自定义图标 | checked: 是否为选中状态 | | icon | 自定义图标 | checked: 是否为选中状态 |
### Checkbox 方法 ### CheckboxGroup 方法
通过 ref 可以获取到 checkbox 实例并调用实例方法 通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| |------|------|------|------|
| toggle | 切换选中状态 | - | - | | toggleAll | 切换所有复选框的选中状态 | checked?: boolean | - |
### Checkbox 方法
通过 ref 可以获取到 Checkbox 实例并调用实例方法
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| toggle | 切换选中状态 | checked?: boolean | - |

98
src/checkbox/demo/index.vue
View File

@ -5,25 +5,16 @@
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="$t('disabled')">
<van-checkbox <van-checkbox :value="false" disabled>
:value="false"
disabled
>
{{ $t('checkbox') }} {{ $t('checkbox') }}
</van-checkbox> </van-checkbox>
<van-checkbox <van-checkbox :value="true" disabled>
:value="true"
disabled
>
{{ $t('checkbox') }} {{ $t('checkbox') }}
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="$t('customColor')">
<van-checkbox <van-checkbox v-model="checkbox2" checked-color="#07c160">
v-model="checkbox2"
checked-color="#07c160"
>
{{ $t('customColor') }} {{ $t('customColor') }}
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
@ -32,38 +23,40 @@
<van-checkbox v-model="checkbox3"> <van-checkbox v-model="checkbox3">
{{ $t('customIcon') }} {{ $t('customIcon') }}
<template #icon="{ checked }"> <template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive"> <img :src="checked ? activeIcon : inactiveIcon">
</template> </template>
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
<van-checkbox <van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
v-for="(item, index) in list" <van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
:key="index" <van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
:name="item"
>
{{ $t('checkbox') }} {{ item }}
</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="$t('title4')">
<van-checkbox-group <van-checkbox-group v-model="result2" :max="2">
v-model="result2" <van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
:max="2" <van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
> <van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
<van-checkbox
v-for="(item, index) in list"
:key="index"
:name="item"
>
{{ $t('checkbox') }} {{ item }}
</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</demo-block> </demo-block>
<demo-block v-if="!$attrs.weapp" :title="$t('toggleAll')">
<van-checkbox-group v-model="checkAllResult" ref="group">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
<div class="demo-checkbox-buttons">
<van-button type="primary" @click="checkAll">{{ $t('checkAll') }}</van-button>
<van-button type="info" @click="toggleAll">{{ $t('inverse') }}</van-button>
</div>
</demo-block>
<demo-block :title="$t('title5')"> <demo-block :title="$t('title5')">
<van-checkbox-group v-model="result3"> <van-checkbox-group v-model="result3">
<van-cell-group> <van-cell-group>
@ -74,11 +67,9 @@
:title="$t('checkbox') + item" :title="$t('checkbox') + item"
@click="toggle(index)" @click="toggle(index)"
> >
<van-checkbox <template #right-icon>
ref="checkboxes" <van-checkbox ref="checkboxes" :name="item" />
slot="right-icon" </template>
:name="item"
/>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>
@ -95,7 +86,10 @@ export default {
customColor: '自定义颜色', customColor: '自定义颜色',
title3: '复选框组', title3: '复选框组',
title4: '设置最大可选数', title4: '设置最大可选数',
title5: '搭配单元格组件使用' title5: '搭配单元格组件使用',
toggleAll: '全选与反选',
checkAll: '全选',
inverse: '反选'
}, },
'en-US': { 'en-US': {
checkbox: 'Checkbox', checkbox: 'Checkbox',
@ -103,7 +97,10 @@ export default {
customColor: 'Custom Color', customColor: 'Custom Color',
title3: 'Checkbox Group', title3: 'Checkbox Group',
title4: 'Maximum amount of checked options', title4: 'Maximum amount of checked options',
title5: 'Inside a Cell' title5: 'Inside a Cell',
toggleAll: 'Toggle All',
checkAll: 'Check All',
inverse: 'Inverse'
} }
}, },
@ -120,22 +117,31 @@ export default {
result: ['a', 'b'], result: ['a', 'b'],
result2: [], result2: [],
result3: [], result3: [],
icon: { checkAllResult: [],
active: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png' inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}; };
}, },
methods: { methods: {
toggle(index) { toggle(index) {
this.$refs.checkboxes[index].toggle(); this.$refs.checkboxes[index].toggle();
},
checkAll() {
this.$refs.group.toggleAll(true);
},
toggleAll() {
this.$refs.group.toggleAll();
} }
} }
}; };
</script> </script>
<style lang="less"> <style lang="less">
@import "../../style/var";
.demo-checkbox { .demo-checkbox {
.van-checkbox { .van-checkbox {
margin: 10px 0 0 20px; margin: 10px 0 0 20px;
@ -150,5 +156,13 @@ export default {
img { img {
height: 20px; height: 20px;
} }
&-buttons {
margin-top: @padding-md;
.van-button {
margin-left: @padding-md;
}
}
} }
</style> </style>

4
src/checkbox/index.js
View File

@ -33,9 +33,7 @@ export default createComponent({
}, },
methods: { methods: {
toggle() { toggle(checked = !this.checked) {
const checked = !this.checked;
// When toggle method is called multiple times at the same time, // When toggle method is called multiple times at the same time,
// only the last call is valid. // only the last call is valid.
// This is a hack for usage inside Cell. // This is a hack for usage inside Cell.

41
src/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -41,21 +41,15 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">复选框 a</span>
复选框 a
</span>
</div> </div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">复选框 b</span>
复选框 b
</span>
</div> </div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">复选框 c</span>
复选框 c
</span>
</div> </div>
</div> </div>
</div> </div>
@ -63,24 +57,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">复选框 a</span>
复选框 a
</span>
</div> </div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">复选框 b</span>
复选框 b
</span>
</div> </div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">复选框 c</span>
复选框 c
</span>
</div> </div>
</div> </div>
</div> </div>
<div>
<div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 a</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
</div>
</div>
<div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">全选</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">反选</span></button></div>
</div>
<div> <div>
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">

41
src/checkbox/test/index.spec.js
View File

@ -52,13 +52,14 @@ test('checkbox group', async () => {
const wrapper = mount({ const wrapper = mount({
template: ` template: `
<van-checkbox-group v-model="result" :max="2"> <van-checkbox-group v-model="result" :max="2">
<van-checkbox v-for="item in list" :key="item" :name="item"></van-checkbox> <van-checkbox name="a" />
<van-checkbox name="b" />
<van-checkbox name="c" />
</van-checkbox-group> </van-checkbox-group>
`, `,
data() { data() {
return { return {
result: [], result: []
list: ['a', 'b', 'c']
}; };
} }
}); });
@ -155,3 +156,37 @@ test('bind-group prop', async () => {
expect(wrapper.vm.result).toEqual([]); expect(wrapper.vm.result).toEqual([]);
expect(wrapper.vm.value).toBeTruthy(); expect(wrapper.vm.value).toBeTruthy();
}); });
test('toggleAll method', async () => {
const wrapper = mount({
template: `
<van-checkbox-group v-model="result" ref="group">
<van-checkbox name="a" />
<van-checkbox name="b" />
<van-checkbox name="c" />
</van-checkbox-group>
`,
data() {
return {
result: ['a']
};
},
methods: {
toggleAll(checked) {
this.$refs.group.toggleAll(checked);
}
}
});
wrapper.vm.toggleAll();
await later();
expect(wrapper.vm.result).toEqual(['b', 'c']);
wrapper.vm.toggleAll(false);
await later();
expect(wrapper.vm.result).toEqual([]);
wrapper.vm.toggleAll(true);
await later();
expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
});