[Improvement] Checkbox: with cell (#1430)

packages/checkbox/demo/index.vue

@@ -46,9 +46,15 @@
 
     <demo-block :title="$t('title5')">
       <van-checkbox-group v-model="result3">
-        <van-cell-group>
+        <van-cell-group >
-          <van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
+          <van-cell
-            <van-checkbox :name="item" />
+            v-for="(item, index) in list"
+            clickable
+            :key="index"
+            :title="$t('checkbox') + item"
+            @click="toggle(index)"
+          >
+            <van-checkbox ref="checkboxes" :name="item" />
           </van-cell>
         </van-cell-group>
       </van-checkbox-group>
@@ -92,6 +98,12 @@ export default {
         active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
       }
     };
+  },
+
+  methods: {
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle();
+    }
   }
 };
 </script>

packages/checkbox/en-US.md

@@ -102,13 +102,30 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
+    <van-cell
-      <van-checkbox :name="item" />
+      v-for="item in list"
+      clickable
+      :key="item"
+      :title="`Checkbox ${item}`"
+      @click="toggle(index)"
+    >
+      <van-checkbox :name="item" ref="checkboxes" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
 ```
 
+```js
+export default {
+  methods: {
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle();
+    }
+  }
+}
+```
+
+
 ### Checkbox API
 
 | Attribute | Description | Type | Default |
@@ -146,3 +163,11 @@ export default {
 |-----------|-----------|-----------|
 | default | Custom label | - |
 | icon | Custom icon | checked: whether to be checked |
+
+### Checkbox Methods
+
+Use ref to get checkbox instance and call instance methods
+
+| Name | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| toggle | - | - | Toggle check status |

packages/checkbox/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="b()">
-    <div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="onClick">
+    <div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="toggle">
       <slot name="icon" :checked="checked">
         <icon name="success" />
       </slot>
     </div>
-    <span v-if="$slots.default" :class="b('label', labelPosition)" @click="onClick('label')">
+    <span v-if="$slots.default" :class="b('label', labelPosition)" @click="toggle('label')">
       <slot />
     </span>
   </div>
@@ -86,7 +86,7 @@ export default create({
   },
 
   methods: {
-    onClick(target) {
+    toggle(target) {
       if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) {
         this.checked = !this.checked;
       }

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

@@ -91,7 +91,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-checkbox-group">
       <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-hairline">
+        <div class="van-cell van-cell--clickable van-hairline">
           <!---->
           <div class="van-cell__title"><span>复选框a</span>
             <!---->
@@ -108,7 +108,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-hairline">
+        <div class="van-cell van-cell--clickable van-hairline">
           <!---->
           <div class="van-cell__title"><span>复选框b</span>
             <!---->
@@ -125,7 +125,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-hairline">
+        <div class="van-cell van-cell--clickable van-hairline">
           <!---->
           <div class="van-cell__title"><span>复选框c</span>
             <!---->

packages/checkbox/zh-CN.md

@@ -101,18 +101,34 @@ export default {
 
 #### 与 Cell 组件一起使用
 
-此时你需要再引入`Cell`和`CellGroup`组件
+此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
 
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
+    <van-cell
-      <van-checkbox :name="item" />
+      v-for="item in list"
+      clickable
+      :key="item"
+      :title="`复选框 ${item}`"
+      @click="toggle(index)"
+    >
+      <van-checkbox :name="item" ref="checkboxes" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
 ```
 
+```js
+export default {
+  methods: {
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle();
+    }
+  }
+}
+```
+
 ### Checkbox API
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -150,3 +166,11 @@ export default {
 |-----------|-----------|-----------|
 | default | 自定义文本 | - |
 | icon | 自定义图标 | checked: 是否为选中状态 |
+
+### Checkbox 方法
+
+通过 ref 可以获取到 checkbox 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| toggle | - | - | 切换选中状态 |

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

@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <!---->
         </div>
@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <!---->
         </div>
@@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <!---->
         </div>
@@ -107,7 +107,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <!---->
         </div>
@@ -134,7 +134,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <!---->
         </div>
@@ -161,7 +161,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <!---->
         </div>
@@ -188,7 +188,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <div>
             <div>
@@ -219,7 +219,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane">
+        <div class="van-tab__pane" style="display:none;">
           <!---->
           <!---->
         </div>