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

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'
     };
   }
 };

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

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>

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>