diff --git a/packages/checkbox/demo/index.vue b/packages/checkbox/demo/index.vue index d724a44b6..25975861f 100644 --- a/packages/checkbox/demo/index.vue +++ b/packages/checkbox/demo/index.vue @@ -84,6 +84,27 @@ + + {{ $t('selectAll') }} + + + {{ $t('checkbox') }} {{ item }} + + + {{ $t('checkbox') }} {{ $t('other') }} + + + @@ -96,7 +117,10 @@ export default { customColor: '自定义颜色', title3: '复选框组', title4: '设置最大可选数', - title5: '搭配单元格组件使用' + title5: '搭配单元格组件使用', + title6: '取消和复选框组的绑定', + other: '其他', + selectAll: '全选', }, 'en-US': { checkbox: 'Checkbox', @@ -104,7 +128,10 @@ export default { customColor: 'Custom Color', title3: 'Checkbox Group', title4: 'Maximum amount of checked options', - title5: 'Inside a Cell' + title5: 'Inside a Cell', + title6: 'Cancel Bind Group', + other: 'other', + selectAll: 'select all', } }, @@ -121,16 +148,34 @@ export default { result: ['a', 'b'], result2: [], result3: [], + result4: [], + other: true, + selectAll: false, icon: { normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png', active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png' } }; }, - + watch: { + selectAll() { + if (this.selectAll) { + this.result4 = this.list; + } else { + this.result4 = []; + } + } + }, methods: { toggle(index) { this.$refs.checkboxes[index].toggle(); + }, + select4() { + if (this.result4.length === 3) { + this.selectAll = true; + } else { + this.selectAll = false; + } } } }; diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap index c82273a24..f4681d69f 100644 --- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap +++ b/packages/checkbox/test/__snapshots__/demo.spec.js.snap @@ -114,5 +114,37 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
全选 +
+
+
+
+
+ 复选框 a + +
+
+
+
+ 复选框 b + +
+
+
+
+ 复选框 c + +
+
+
+
+ 复选框 其他 + +
+
+
`; diff --git a/packages/checkbox/test/index.spec.js b/packages/checkbox/test/index.spec.js index 5920d5899..376eb6b5c 100644 --- a/packages/checkbox/test/index.spec.js +++ b/packages/checkbox/test/index.spec.js @@ -75,6 +75,35 @@ test('checkbox group', async () => { await later(); expect(wrapper.vm.result).toEqual(['b']); }); +test('checkbox group unbind', async () => { + const wrapper = mount({ + template: ` + + + + + `, + components: { + Checkbox, + CheckboxGroup + }, + data() { + return { + result: [], + list: ['a', 'b', 'c'] + }; + } + }); + + const icons = wrapper.findAll('.van-checkbox__icon'); + icons.at(3).trigger('click'); + await later(); + expect(wrapper.vm.result).toEqual([]); + + icons.at(3).trigger('click'); + await later(); + expect(wrapper.vm.result).toEqual([]); +}); test('click event', () => { const onClick = jest.fn(); diff --git a/packages/checkbox/zh-CN.md b/packages/checkbox/zh-CN.md index 85807c961..f6691422e 100644 --- a/packages/checkbox/zh-CN.md +++ b/packages/checkbox/zh-CN.md @@ -79,6 +79,7 @@ export default { > 复选框 {{ item }} + 不与复选框组绑定 ``` @@ -148,6 +149,7 @@ export default { | label-disabled | 是否禁用复选框文本点击 | `Boolean` | `false` | - | | label-position | 文本位置,可选值为 `left` | `String` | `right` | 1.1.11 | | checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 | +| bind-parent | 与复选框组绑定 | `boolean` | `true` | xxx | ### CheckboxGroup API diff --git a/packages/mixins/checkbox.js b/packages/mixins/checkbox.js index 6f369d09e..63db397a8 100644 --- a/packages/mixins/checkbox.js +++ b/packages/mixins/checkbox.js @@ -17,11 +17,17 @@ export const CheckboxMixin = (parent, bem) => ({ shape: { type: String, default: 'round' + }, + bindParent: { + type: Boolean, + default: true, } }, created() { - this.findParent(parent); + if (this.bindParent) { + this.findParent(parent); + } }, computed: { @@ -40,7 +46,7 @@ export const CheckboxMixin = (parent, bem) => ({ } }, - render(h) { + render() { const { slots, checked } = this; const CheckIcon = slots('icon', { checked }) || (