feat(Checkbox): add bind-group prop (#4600)

src/checkbox/README.md

@@ -155,6 +155,7 @@ export default {
 | label-position | Can be set to `left` | *string* | `right` | - |
 | icon-size | Icon size | *string \| number* | `20px` | - |
 | checked-color | Checked color | *string* | `#1989fa` | - | - |
+| bind-group | Whether to bind with CheckboxGroup | *boolean* | `true` | 2.2.4 |
 
 ### CheckboxGroup Props
 

src/checkbox/README.zh-CN.md

@@ -157,6 +157,7 @@ export default {
 | label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
 | icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
 | checked-color | 选中状态颜色 | *string* | `#1989fa` | - |
+| bind-group | 是否与复选框组绑定 | *boolean* | `true` | 2.2.4 |
 
 ### CheckboxGroup Props
 

src/checkbox/test/index.spec.js

@@ -131,3 +131,27 @@ test('checked-color prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('bind-group prop', async () => {
+  const wrapper = mount({
+    template: `
+      <van-checkbox-group v-model="result">
+        <van-checkbox v-model="value" :bind-group="false" />
+        <van-checkbox v-for="item in list" :key="item" :name="item"></van-checkbox>
+      </van-checkbox-group>
+    `,
+    data() {
+      return {
+        value: false,
+        result: [],
+        list: ['a', 'b', 'c']
+      };
+    }
+  });
+
+  const icons = wrapper.findAll('.van-checkbox__icon');
+  icons.at(0).trigger('click');
+  await later();
+  expect(wrapper.vm.result).toEqual([]);
+  expect(wrapper.vm.value).toBeTruthy();
+});

src/mixins/checkbox.js

@@ -19,10 +19,18 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
     shape: {
       type: String,
       default: 'round'
+    },
+    bindGroup: {
+      type: Boolean,
+      default: true
     }
   },
 
   computed: {
+    disableBindRelation() {
+      return !this.bindGroup;
+    },
+
     isDisabled() {
       return (this.parent && this.parent.disabled) || this.disabled;
     },

src/mixins/relation.ts

@@ -21,6 +21,10 @@ function flattenVNodes(vnodes: VNode[]) {
   return result;
 }
 
+type ChildrenMixinThis = {
+  disableBindRelation?: boolean;
+};
+
 export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}) {
   const indexKey = options.indexKey || 'index';
 
@@ -33,6 +37,10 @@ export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}
 
     computed: {
       parent() {
+        if ((this as ChildrenMixinThis).disableBindRelation) {
+          return null;
+        }
+
         return (this as any)[parent];
       },