From 1926d3ad096163666db5dcf6a1285d3503599f14 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 1 Oct 2019 04:59:25 +0800
Subject: [PATCH] docs(Checkbox): add custom shape demo (#4642)

---
 src/checkbox/README.md                        |  6 ++
 src/checkbox/README.zh-CN.md                  | 10 +++-
 src/checkbox/demo/index.vue                   |  9 +++
 .../test/__snapshots__/demo.spec.js.snap      |  8 +++
 src/radio/README.md                           | 10 ++--
 src/radio/README.zh-CN.md                     | 16 +++---
 src/radio/demo/index.vue                      | 57 ++++---------------
 .../test/__snapshots__/demo.spec.js.snap      |  8 +--
 8 files changed, 55 insertions(+), 69 deletions(-)

diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 01a145407..697d28e8e 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -33,6 +33,12 @@ export default {
 <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
 ```
 
+### Custom Shape
+
+```html
+<van-checkbox v-model="checked" shape="square">Checkbox</van-checkbox>
+```
+
 ### Custom Color
 
 ```html
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index 9eaa1af0d..4f3dd717b 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 
 ### 基础用法
 
-通过`v-model`绑定 checkbox 的勾选状态
+通过`v-model`绑定复选框的勾选状态
 
 ```html
 <van-checkbox v-model="checked">复选框</van-checkbox>
@@ -37,6 +37,14 @@ export default {
 <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```
 
+### 自定义形状
+
+将`shape`属性设置为`square`，复选框的形状会变成方形
+
+```html
+<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
+```
+
 ### 自定义颜色
 
 通过`checked-color`属性可以自定义选中状态下的图标颜色
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index d120712c4..4fc3c7a32 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -13,6 +13,12 @@
       </van-checkbox>
     </demo-block>
 
+    <demo-block :title="$t('customShape')">
+      <van-checkbox v-model="checkboxShape" shape="square">
+        {{ $t('customColor') }}
+      </van-checkbox>
+    </demo-block>
+
     <demo-block :title="$t('customColor')">
       <van-checkbox v-model="checkbox2" checked-color="#07c160">
         {{ $t('customColor') }}
@@ -84,6 +90,7 @@ export default {
       checkbox: '复选框',
       customIcon: '自定义图标',
       customColor: '自定义颜色',
+      customShape: '自定义形状',
       title3: '复选框组',
       title4: '设置最大可选数',
       title5: '搭配单元格组件使用',
@@ -95,6 +102,7 @@ export default {
       checkbox: 'Checkbox',
       customIcon: 'Custom Icon',
       customColor: 'Custom Color',
+      customShape: 'Custom Shape',
       title3: 'Checkbox Group',
       title4: 'Maximum amount of checked options',
       title5: 'Inside a Cell',
@@ -109,6 +117,7 @@ export default {
       checkbox1: true,
       checkbox2: true,
       checkbox3: true,
+      checkboxShape: true,
       list: [
         'a',
         'b',
diff --git a/src/checkbox/test/__snapshots__/demo.spec.js.snap b/src/checkbox/test/__snapshots__/demo.spec.js.snap
index 0c5713c51..d3f357e59 100644
--- a/src/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/src/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -22,6 +22,14 @@ exports[`renders demo correctly 1`] = `
     </span>
     </div>
   </div>
+  <div>
+    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
+      <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
+          <!----></i></div><span class="van-checkbox__label">
+      自定义颜色
+    </span>
+    </div>
+  </div>
   <div>
     <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
diff --git a/src/radio/README.md b/src/radio/README.md
index 0649c2172..870d9abfc 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -62,7 +62,7 @@ Use icon slot to custom icon
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
   <van-radio name="2">
@@ -70,7 +70,7 @@ Use icon slot to custom icon
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
 </van-radio-group>
@@ -81,10 +81,8 @@ export default {
   data() {
     return {
       radio: '1',
-      icon: {
-        active: 'https://img.yzcdn.cn/vant/user-active.png',
-        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
-      }
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
     };
   }
 };
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index be9334088..09791d680 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -35,7 +35,7 @@ export default {
 
 ### 禁用状态
 
-通过`disabled`属性禁止选项切换，在`van-radio`上设置`disabled`可以禁用单个选项
+通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项
 
 ```html
 <van-radio-group v-model="radio" disabled>
@@ -66,7 +66,7 @@ export default {
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
   <van-radio name="2">
@@ -74,7 +74,7 @@ export default {
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
 </van-radio-group>
@@ -83,18 +83,16 @@ export default {
 ```js
 export default {
   data() {
-    radio: '1'
-    icon: {
-      active: 'https://img.yzcdn.cn/vant/user-active.png',
-      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
-    }
+    radio: '1',
+    activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
   }
 }
 ```
 
 ### 与 Cell 组件一起使用
 
-此时你需要再引入`Cell`和`CellGroup`组件。
+此时你需要再引入`Cell`和`CellGroup`组件
 
 ```html
 <van-radio-group v-model="radio">
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index 09798ea82..232ea1d4b 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -1,51 +1,28 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-radio-group
-        v-model="radio1"
-        class="demo-radio-group"
-      >
+      <van-radio-group v-model="radio1" class="demo-radio-group">
         <van-radio name="1">{{ $t('radio') }} 1</van-radio>
         <van-radio name="2">{{ $t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-radio-group
-        v-model="radio2"
-        class="demo-radio-group"
-        disabled
-      >
+      <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
         <van-radio name="1">{{ $t('radio') }} 1</van-radio>
         <van-radio name="2">{{ $t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-radio-group
-        v-model="radio3"
-        class="demo-radio-group"
-      >
-        <van-radio
-          name="1"
-          checked-color="#07c160"
-        >
-          {{ $t('radio') }} 1
-        </van-radio>
-        <van-radio
-          name="2"
-          checked-color="#07c160"
-        >
-          {{ $t('radio') }} 2
-        </van-radio>
+      <van-radio-group v-model="radio3" class="demo-radio-group">
+        <van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
+        <van-radio name="2" checked-color="#07c160">{{ $t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('customIcon')">
-      <van-radio-group
-        v-model="radio4"
-        class="demo-radio-group"
-      >
+      <van-radio-group v-model="radio4" class="demo-radio-group">
         <van-radio name="1">
           {{ $t('radio') }} 1
           <template #icon="{ checked }">
@@ -64,25 +41,11 @@
     <demo-block :title="$t('withCell')">
       <van-radio-group v-model="radio5">
         <van-cell-group>
-          <van-cell
-            clickable
-            :title="$t('radio') + 1"
-            @click="radio5 = '1'"
-          >
-            <van-radio
-              name="1"
-              slot="right-icon"
-            />
+          <van-cell clickable :title="$t('radio') + 1" @click="radio5 = '1'">
+            <van-radio name="1" slot="right-icon" />
           </van-cell>
-          <van-cell
-            clickable
-            :title="$t('radio') + 2"
-            @click="radio5 = '2'"
-          >
-            <van-radio
-              name="2"
-              slot="right-icon"
-            />
+          <van-cell clickable :title="$t('radio') + 2" @click="radio5 = '2'">
+            <van-radio name="2" slot="right-icon" />
           </van-cell>
         </van-cell-group>
       </van-radio-group>
diff --git a/src/radio/test/__snapshots__/demo.spec.js.snap b/src/radio/test/__snapshots__/demo.spec.js.snap
index 80190490e..fea9f6b8b 100644
--- a/src/radio/test/__snapshots__/demo.spec.js.snap
+++ b/src/radio/test/__snapshots__/demo.spec.js.snap
@@ -30,15 +30,11 @@ exports[`renders demo correctly 1`] = `
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
-            <!----></i></div><span class="van-radio__label">
-        单选框 1
-      </span>
+            <!----></i></div><span class="van-radio__label">单选框 1</span>
       </div>
       <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">
-        单选框 2
-      </span>
+            <!----></i></div><span class="van-radio__label">单选框 2</span>
       </div>
     </div>
   </div>