From a5628c2dd2ed51900e73fca3200a181c82746646 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 6 Jul 2018 20:57:40 +0800
Subject: [PATCH] [Improvement] Checkbox: with cell (#1430)

---
 packages/checkbox/demo/index.vue              | 18 +++++++++--
 packages/checkbox/en-US.md                    | 29 ++++++++++++++++--
 packages/checkbox/index.vue                   |  6 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  6 ++--
 packages/checkbox/zh-CN.md                    | 30 +++++++++++++++++--
 .../tab/test/__snapshots__/demo.spec.js.snap  | 16 +++++-----
 6 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/packages/checkbox/demo/index.vue b/packages/checkbox/demo/index.vue
index 7851b0836..3cafb6f79 100644
--- a/packages/checkbox/demo/index.vue
+++ b/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 v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
-            <van-checkbox :name="item" />
+        <van-cell-group >
+          <van-cell
+            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>
diff --git a/packages/checkbox/en-US.md b/packages/checkbox/en-US.md
index b6f57cd42..46d9af22b 100644
--- a/packages/checkbox/en-US.md
+++ b/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-checkbox :name="item" />
+    <van-cell
+      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 |
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index ac75161bd..2af8eddfc 100644
--- a/packages/checkbox/index.vue
+++ b/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;
       }
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
index c073cfca2..48af34e20 100644
--- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/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>
             <!---->
diff --git a/packages/checkbox/zh-CN.md b/packages/checkbox/zh-CN.md
index 9ba649ce0..35ba1661e 100644
--- a/packages/checkbox/zh-CN.md
+++ b/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-checkbox :name="item" />
+    <van-cell
+      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 | - | - | 切换选中状态 |
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index b39b1035d..c446ee884 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/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>