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/test/__snapshots__/demo.spec.js.snap
+23 -18
View File
@@ -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">
src/checkbox/test/index.spec.js
+38 -3
View File
@@ -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']);
});