From 1c5463150c855d02d74143c454145c2d7650c59f Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 30 Sep 2019 14:47:35 +0800 Subject: [PATCH] feat(CheckboxGroup): add toggleAll method (#4640) --- src/checkbox-group/index.js | 8 ++ src/checkbox/README.md | 75 +++++++++----- src/checkbox/README.zh-CN.md | 87 +++++++++++----- src/checkbox/demo/index.vue | 98 +++++++++++-------- src/checkbox/index.js | 4 +- .../test/__snapshots__/demo.spec.js.snap | 41 ++++---- src/checkbox/test/index.spec.js | 41 +++++++- 7 files changed, 240 insertions(+), 114 deletions(-) diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js index 55f24579b..b61a7d1e2 100644 --- a/src/checkbox-group/index.js +++ b/src/checkbox-group/index.js @@ -23,6 +23,14 @@ export default createComponent({ } }, + methods: { + toggleAll(checked) { + this.children.forEach(item => { + item.toggle(checked); + }); + } + }, + render() { return
{this.slots()}
; } diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 62605e305..01a145407 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -49,7 +49,7 @@ Use icon slot to custom icon ``` @@ -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 - - Checkbox {{ item }} - + Checkbox a + Checkbox b + Checkbox c ``` @@ -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 - - Checkbox {{ item }} - + Checkbox a + Checkbox b + Checkbox c ``` +### Toggle All + +```html + + Checkbox a + Checkbox b + Checkbox c + + +Check All +Toggle All +``` + +```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 | - | diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index 7d6497170..9eaa1af0d 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -31,12 +31,16 @@ export default { ### 禁用状态 +通过设置`disabled`属性可以禁用复选框 + ```html 复选框 ``` ### 自定义颜色 +通过`checked-color`属性可以自定义选中状态下的图标颜色 + ```html 复选框 ``` @@ -51,7 +55,7 @@ export default { ``` @@ -60,27 +64,21 @@ export default { export default { data() { 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' } } ``` ### 复选框组 -与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值 +复选框可以与复选框组一起使用，选中值是一个数组，通过`v-model`绑定在`CheckboxGroup`上，数组中的值为选中的复选框的`name` ```html - - 复选框 {{ item }} - + 复选框 a + 复选框 b + 复选框 c ``` @@ -88,7 +86,6 @@ export default { export default { data() { return { - list: ['a', 'b', 'c'], result: ['a', 'b'] }; } @@ -97,21 +94,53 @@ export default { ### 设置最大可选数 +通过`max`属性可以限制最大可选数 + ```html - - 复选框 {{ item }} - + 复选框 a + 复选框 b + 复选框 c ``` +### 全选与反选 + +通过`CheckboxGroup`实例上的`toggleAll`方法可以实现全选与反选 + +```html + + 复选框 a + 复选框 b + 复选框 c + + +全选 +反选 +``` + +```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 @@ -189,10 +218,18 @@ export default { | default | 自定义文本 | - | | icon | 自定义图标 | checked: 是否为选中状态 | -### Checkbox 方法 +### CheckboxGroup 方法 -通过 ref 可以获取到 checkbox 实例并调用实例方法 +通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法 | 方法名 | 说明 | 参数 | 返回值 | |------|------|------|------| -| toggle | 切换选中状态 | - | - | +| toggleAll | 切换所有复选框的选中状态 | checked?: boolean | - | + +### Checkbox 方法 + +通过 ref 可以获取到 Checkbox 实例并调用实例方法 + +| 方法名 | 说明 | 参数 | 返回值 | +|------|------|------|------| +| toggle | 切换选中状态 | checked?: boolean | - | diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue index 449cf7f5f..d120712c4 100644 --- a/src/checkbox/demo/index.vue +++ b/src/checkbox/demo/index.vue @@ -5,25 +5,16 @@ - + {{ $t('checkbox') }} - + {{ $t('checkbox') }} - + {{ $t('customColor') }} @@ -32,38 +23,40 @@ {{ $t('customIcon') }} - - {{ $t('checkbox') }} {{ item }} - + {{ $t('checkbox') }} a + {{ $t('checkbox') }} b + {{ $t('checkbox') }} c - - - {{ $t('checkbox') }} {{ item }} - + + {{ $t('checkbox') }} a + {{ $t('checkbox') }} b + {{ $t('checkbox') }} c + + + {{ $t('checkbox') }} a + {{ $t('checkbox') }} b + {{ $t('checkbox') }} c + + +
+ {{ $t('checkAll') }} + {{ $t('inverse') }} +
+ + @@ -74,11 +67,9 @@ :title="$t('checkbox') + item" @click="toggle(index)" > - + @@ -95,7 +86,10 @@ export default { customColor: '自定义颜色', title3: '复选框组', title4: '设置最大可选数', - title5: '搭配单元格组件使用' + title5: '搭配单元格组件使用', + toggleAll: '全选与反选', + checkAll: '全选', + inverse: '反选' }, 'en-US': { checkbox: 'Checkbox', @@ -103,7 +97,10 @@ export default { customColor: 'Custom Color', title3: 'Checkbox Group', 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'], result2: [], result3: [], - icon: { - active: 'https://img.yzcdn.cn/vant/user-active.png', - inactive: 'https://img.yzcdn.cn/vant/user-inactive.png' - } + checkAllResult: [], + activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', + inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' }; }, methods: { toggle(index) { this.$refs.checkboxes[index].toggle(); + }, + + checkAll() { + this.$refs.group.toggleAll(true); + }, + + toggleAll() { + this.$refs.group.toggleAll(); } } }; diff --git a/src/checkbox/index.js b/src/checkbox/index.js index e54c2eacc..1ce28b4ae 100644 --- a/src/checkbox/index.js +++ b/src/checkbox/index.js @@ -33,9 +33,7 @@ export default createComponent({ }, methods: { - toggle() { - const checked = !this.checked; - + toggle(checked = !this.checked) { // When toggle method is called multiple times at the same time, // only the last call is valid. // This is a hack for usage inside Cell. diff --git a/src/checkbox/test/__snapshots__/demo.spec.js.snap b/src/checkbox/test/__snapshots__/demo.spec.js.snap index 7a3c65e89..0c5713c51 100644 --- a/src/checkbox/test/__snapshots__/demo.spec.js.snap +++ b/src/checkbox/test/__snapshots__/demo.spec.js.snap @@ -41,21 +41,15 @@ exports[`renders demo correctly 1`] = `
复选框 a
复选框 b 复选框 c @@ -63,24 +57,35 @@ exports[`renders demo correctly 1`] = `
复选框 a
复选框 b 复选框 c +
+
+ + + +
+
+
diff --git a/src/checkbox/test/index.spec.js b/src/checkbox/test/index.spec.js index 948f1c5a2..0b81c4d3d 100644 --- a/src/checkbox/test/index.spec.js +++ b/src/checkbox/test/index.spec.js @@ -52,13 +52,14 @@ test('checkbox group', async () => { const wrapper = mount({ template: ` - + + + `, data() { return { - result: [], - list: ['a', 'b', 'c'] + result: [] }; } }); @@ -155,3 +156,37 @@ test('bind-group prop', async () => { expect(wrapper.vm.result).toEqual([]); expect(wrapper.vm.value).toBeTruthy(); }); + +test('toggleAll method', async () => { + const wrapper = mount({ + template: ` + + + + + + `, + 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']); +});