mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(CheckboxGroup): add toggleAll method (#4640)
This commit is contained in:
neverland
GitHub
parent
9a79de0456
commit
1c5463150c
@ -23,6 +23,14 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleAll(checked) {
|
||||
this.children.forEach(item => {
|
||||
item.toggle(checked);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
return <div class={bem()}>{this.slots()}</div>;
|
||||
}
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -31,12 +31,16 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过设置`disabled`属性可以禁用复选框
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性可以自定义选中状态下的图标颜色
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
|
||||
```
|
||||
@ -51,7 +55,7 @@ export default {
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-checkbox>
|
||||
```
|
||||
@ -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
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
复选框 {{ item }}
|
||||
</van-checkbox>
|
||||
<van-checkbox name="a">复选框 a</van-checkbox>
|
||||
<van-checkbox name="b">复选框 b</van-checkbox>
|
||||
<van-checkbox name="c">复选框 c</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
@ -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
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
复选框 {{ item }}
|
||||
</van-checkbox>
|
||||
<van-checkbox name="a">复选框 a</van-checkbox>
|
||||
<van-checkbox name="b">复选框 b</van-checkbox>
|
||||
<van-checkbox name="c">复选框 c</van-checkbox>
|
||||
</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
|
||||
<van-checkbox-group v-model="result">
|
||||
@ -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 | - |
|
||||
|
||||
@ -5,25 +5,16 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-checkbox
|
||||
:value="false"
|
||||
disabled
|
||||
>
|
||||
<van-checkbox :value="false" disabled>
|
||||
{{ $t('checkbox') }}
|
||||
</van-checkbox>
|
||||
<van-checkbox
|
||||
:value="true"
|
||||
disabled
|
||||
>
|
||||
<van-checkbox :value="true" disabled>
|
||||
{{ $t('checkbox') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-checkbox
|
||||
v-model="checkbox2"
|
||||
checked-color="#07c160"
|
||||
>
|
||||
<van-checkbox v-model="checkbox2" checked-color="#07c160">
|
||||
{{ $t('customColor') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
@ -32,38 +23,40 @@
|
||||
<van-checkbox v-model="checkbox3">
|
||||
{{ $t('customIcon') }}
|
||||
<template #icon="{ checked }">
|
||||
<img :src="checked ? icon.active : icon.inactive">
|
||||
<img :src="checked ? activeIcon : inactiveIcon">
|
||||
</template>
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
{{ $t('checkbox') }} {{ item }}
|
||||
</van-checkbox>
|
||||
<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>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-checkbox-group
|
||||
v-model="result2"
|
||||
:max="2"
|
||||
>
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
{{ $t('checkbox') }} {{ item }}
|
||||
</van-checkbox>
|
||||
<van-checkbox-group v-model="result2" :max="2">
|
||||
<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>
|
||||
</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')">
|
||||
<van-checkbox-group v-model="result3">
|
||||
<van-cell-group>
|
||||
@ -74,11 +67,9 @@
|
||||
:title="$t('checkbox') + item"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox
|
||||
ref="checkboxes"
|
||||
slot="right-icon"
|
||||
:name="item"
|
||||
/>
|
||||
<template #right-icon>
|
||||
<van-checkbox ref="checkboxes" :name="item" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
@ -150,5 +156,13 @@ export default {
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
margin-top: @padding-md;
|
||||
|
||||
.van-button {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -41,21 +41,15 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox-group">
|
||||
<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">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框 a
|
||||
</span>
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 a</span>
|
||||
</div>
|
||||
<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">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框 b
|
||||
</span>
|
||||
<!----></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>
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,24 +57,35 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<!----></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>
|
||||
<!----></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>
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
|
||||
</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 class="van-checkbox-group">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
|
||||
@ -52,13 +52,14 @@ test('checkbox group', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<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>
|
||||
`,
|
||||
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: `
|
||||
<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']);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user