docs(Checkbox): add custom shape demo (#4642)

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

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`属性可以自定义选中状态下的图标颜色

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',

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);">