feat(CheckboxGroup): toggleAll support skipDisabled option (#7644)

This commit is contained in:
neverland 2020-11-26 19:34:51 +08:00 committed by GitHub
parent 9f2187f021
commit 488d90aab9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 78 additions and 16 deletions

View File

@ -27,16 +27,19 @@ export default createComponent({
methods: {
// @exposed-api
toggleAll(checked) {
if (checked === false) {
this.$emit('input', []);
return;
toggleAll(options = {}) {
if (typeof options === 'boolean') {
options = { checked: options };
}
let { children } = this;
if (!checked) {
children = children.filter((item) => !item.checked);
const { checked, skipDisabled } = options;
const children = this.children.filter((item) => {
if (item.disabled && skipDisabled) {
return item.checked;
}
return checked ?? !item.checked;
});
const names = children.map((item) => item.name);
this.$emit('input', names);

View File

@ -259,7 +259,30 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
| Name | Description | Attribute | Return value |
| --- | --- | --- | --- |
| toggleAll | Toggle check status of all checkboxes | _checked?: boolean_ | - |
| toggleAll | Toggle check status of all checkboxes | _options?: boolean \| object_ | - |
### toggleAll Usage
```js
const { checkboxGroup } = this.$refs;
// Toggle all
checkboxGroup.toggleAll();
// Select all
checkboxGroup.toggleAll(true);
// Unselect all
checkboxGroup.toggleAll(false);
// Toggle all, skip disabled
checkboxGroup.toggleAll({
skipDisabled: true,
});
// Select all, skip disabled
checkboxGroup.toggleAll({
checked: true,
skipDisabled: true,
});
```
### Checkbox Methods

View File

@ -283,7 +283,30 @@ export default {
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| toggleAll | 切换所有复选框,传`true`为选中,`false`为取消选中,不传参为取反 | _checked?: boolean_ | - |
| toggleAll | 切换所有复选框,传 `true` 为选中,`false` 为取消选中,不传参为取反 | _options?: boolean \| object_ | - |
### toggleAll 方法示例
```js
const { checkboxGroup } = this.$refs;
// 全部反选
checkboxGroup.toggleAll();
// 全部选中
checkboxGroup.toggleAll(true);
// 全部取消
checkboxGroup.toggleAll(false);
// 全部反选,并跳过禁用的复选框
checkboxGroup.toggleAll({
skipDisabled: true,
});
// 全部选中,并跳过禁用的复选框
checkboxGroup.toggleAll({
checked: true,
skipDisabled: true,
});
```
### Checkbox 方法

View File

@ -160,7 +160,7 @@ test('toggleAll method', async () => {
<van-checkbox-group v-model="result" ref="group">
<van-checkbox name="a" />
<van-checkbox name="b" />
<van-checkbox name="c" />
<van-checkbox name="c" disabled />
</van-checkbox-group>
`,
data() {
@ -186,4 +186,12 @@ test('toggleAll method', async () => {
wrapper.vm.toggleAll(true);
await later();
expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
wrapper.vm.toggleAll({ skipDisabled: true });
await later();
expect(wrapper.vm.result).toEqual(['c']);
wrapper.vm.toggleAll({ checked: true, skipDisabled: true });
await later();
expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
});

View File

@ -1,5 +1,10 @@
import { VanComponent } from './component';
export type ToggleAllOptions = {
checked?: boolean;
skipDisabled?: boolean;
};
export class CheckboxGroup extends VanComponent {
toggleAll(checked?: boolean): void;
toggleAll(options?: boolean | ToggleAllOptions): void;
}