feat(Checkbox): add bind-parent prop (#4590)

packages/checkbox/demo/index.vue

@@ -84,6 +84,27 @@
         </van-cell-group>
       </van-checkbox-group>
     </demo-block>
+    <demo-block :title="$t('title6')">
+      <van-checkbox v-model="selectAll">{{ $t('selectAll') }}</van-checkbox>
+      <van-checkbox-group
+        v-model="result4"
+        @change="select4"
+      >
+        <van-checkbox
+          v-for="(item, index) in list"
+          :key="index"
+          :name="item"
+        >
+          {{ $t('checkbox') }} {{ item }}
+        </van-checkbox>
+        <van-checkbox
+          :bind-parent="false"
+          v-model="other"
+        >
+          {{ $t('checkbox') }} {{ $t('other') }}
+        </van-checkbox>
+      </van-checkbox-group>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -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;
+      }
     }
   }
 };

packages/checkbox/test/__snapshots__/demo.spec.js.snap

@@ -114,5 +114,37 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div 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">全选</span>
+    </div>
+    <div class="van-checkbox-group">
+      <div 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 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 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 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">
+        复选框 其他
+      </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;

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: `
+      <checkbox-group v-model="result" :max="2">
+        <checkbox v-for="item in list" :key="item" :name="item"></checkbox>
+        <checkbox :bind-parent='false' v-model="other"></checkbox>
+      </checkbox-group>
+    `,
+    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();

packages/checkbox/zh-CN.md

@@ -79,6 +79,7 @@ export default {
   >
     复选框 {{ item }}
   </van-checkbox>
+  <vant-checkbox :bind-parent="false">不与复选框组绑定</vant-checkbox>
 </van-checkbox-group>
 ```
 
@@ -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
 

packages/mixins/checkbox.js

@@ -17,11 +17,17 @@ export const CheckboxMixin = (parent, bem) => ({
     shape: {
       type: String,
       default: 'round'
+    },
+    bindParent: {
+      type: Boolean,
+      default: true,
     }
   },
 
   created() {
+    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 }) || (