From 8d7dacdda742c1a23f5e9fd776a835e703b69272 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 9 Dec 2020 10:43:43 +0800
Subject: [PATCH] docs(Radio): use composition api

---
 src/radio/README.md       | 38 +++++++++++++++++++++-----------------
 src/radio/README.zh-CN.md | 38 +++++++++++++++++++++-----------------
 src/radio/demo/index.vue  | 20 ++++++++++++--------
 3 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/src/radio/README.md b/src/radio/README.md
index 82b620541..e25553b92 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -18,18 +18,19 @@ app.use(RadioGroup);
 Use `v-model` to bind the name of checked radio.
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1">Radio 1</van-radio>
   <van-radio name="2">Radio 2</van-radio>
 </van-radio-group>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      radio: '1',
-    };
+  setup() {
+    const checked = ref('1');
+    return { checked };
   },
 };
 ```
@@ -37,7 +38,7 @@ export default {
 ### Horizontal
 
 ```html
-<van-radio-group v-model="radio" direction="horizontal">
+<van-radio-group v-model="checked" direction="horizontal">
   <van-radio name="1">Radio 1</van-radio>
   <van-radio name="2">Radio 2</van-radio>
 </van-radio-group>
@@ -46,7 +47,7 @@ export default {
 ### Disabled
 
 ```html
-<van-radio-group v-model="radio" disabled>
+<van-radio-group v-model="checked" disabled>
   <van-radio name="1">Radio 1</van-radio>
   <van-radio name="2">Radio 2</van-radio>
 </van-radio-group>
@@ -55,7 +56,7 @@ export default {
 ### Custom Shape
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" shape="square">Radio 1</van-radio>
   <van-radio name="2" shape="square">Radio 2</van-radio>
 </van-radio-group>
@@ -64,7 +65,7 @@ export default {
 ### Custom Color
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>
   <van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>
 </van-radio-group>
@@ -73,7 +74,7 @@ export default {
 ### Custom Icon Size
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" icon-size="24px">Radio 1</van-radio>
   <van-radio name="2" icon-size="24px">Radio 2</van-radio>
 </van-radio-group>
@@ -84,7 +85,7 @@ export default {
 Use icon slot to custom icon
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1">
     Radio 1
     <template #icon="props">
@@ -107,10 +108,13 @@ Use icon slot to custom icon
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const checked = ref('1');
     return {
-      radio: '1',
+      checked,
       activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
       inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
     };
@@ -121,7 +125,7 @@ export default {
 ### Disable Label Click
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" label-disabled>Radio 1</van-radio>
   <van-radio name="2" label-disabled>Radio 2</van-radio>
 </van-radio-group>
@@ -130,14 +134,14 @@ export default {
 ### Inside a Cell
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-cell-group>
-    <van-cell title="Radio 1" clickable @click="radio = '1'">
+    <van-cell title="Radio 1" clickable @click="checked = '1'">
       <template #right-icon>
         <van-radio name="1" />
       </template>
     </van-cell>
-    <van-cell title="Radio 2" clickable @click="radio = '2'">
+    <van-cell title="Radio 2" clickable @click="checked = '2'">
       <template #right-icon>
         <van-radio name="2" />
       </template>
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 9b2e6f7a6..18b3b7eed 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -22,18 +22,19 @@ app.use(RadioGroup);
 通过 `v-model` 绑定值当前选中项的 name。
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1">单选框 1</van-radio>
   <van-radio name="2">单选框 2</van-radio>
 </van-radio-group>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      radio: '1',
-    };
+  setup() {
+    const checked = ref('1');
+    return { checked };
   },
 };
 ```
@@ -43,7 +44,7 @@ export default {
 将 `direction` 属性设置为 `horizontal` 后，单选框组会变成水平排列。
 
 ```html
-<van-radio-group v-model="radio" direction="horizontal">
+<van-radio-group v-model="checked" direction="horizontal">
   <van-radio name="1">单选框 1</van-radio>
   <van-radio name="2">单选框 2</van-radio>
 </van-radio-group>
@@ -54,7 +55,7 @@ export default {
 通过 `disabled` 属性禁止选项切换，在 `Radio` 上设置 `disabled` 可以禁用单个选项。
 
 ```html
-<van-radio-group v-model="radio" disabled>
+<van-radio-group v-model="checked" disabled>
   <van-radio name="1">单选框 1</van-radio>
   <van-radio name="2">单选框 2</van-radio>
 </van-radio-group>
@@ -65,7 +66,7 @@ export default {
 将 `shape` 属性设置为 `square`，单选框的形状会变成方形。
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" shape="square">单选框 1</van-radio>
   <van-radio name="2" shape="square">单选框 2</van-radio>
 </van-radio-group>
@@ -76,7 +77,7 @@ export default {
 通过 `checked-color` 属性设置选中状态的图标颜色。
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio>
   <van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio>
 </van-radio-group>
@@ -87,7 +88,7 @@ export default {
 通过 `icon-size` 属性可以自定义图标的大小。
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" icon-size="24px">单选框 1</van-radio>
   <van-radio name="2" icon-size="24px">单选框 2</van-radio>
 </van-radio-group>
@@ -98,7 +99,7 @@ export default {
 通过 `icon` 插槽自定义图标，并通过 `slotProps` 判断是否为选中状态。
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1">
     单选框 1
     <template #icon="props">
@@ -121,10 +122,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const checked = ref('1');
     return {
-      radio: '1',
+      checked,
       activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
       inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
     };
@@ -137,7 +141,7 @@ export default {
 设置 `label-disabled` 属性后，点击图标以外的内容不会触发单选框切换。
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-radio name="1" label-disabled>单选框 1</van-radio>
   <van-radio name="2" label-disabled>单选框 2</van-radio>
 </van-radio-group>
@@ -148,14 +152,14 @@ export default {
 此时你需要再引入 `Cell` 和 `CellGroup` 组件。
 
 ```html
-<van-radio-group v-model="radio">
+<van-radio-group v-model="checked">
   <van-cell-group>
-    <van-cell title="单选框 1" clickable @click="radio = '1'">
+    <van-cell title="单选框 1" clickable @click="checked = '1'">
       <template #right-icon>
         <van-radio name="1" />
       </template>
     </van-cell>
-    <van-cell title="单选框 2" clickable @click="radio = '2'">
+    <van-cell title="单选框 2" clickable @click="checked = '2'">
       <template #right-icon>
         <van-radio name="2" />
       </template>
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index 6d01a4884..c43f02433 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -54,13 +54,13 @@
       <van-radio name="1">
         {{ t('radio') }} 1
         <template #icon="{ checked }">
-          <img :src="checked ? icon.active : icon.inactive" />
+          <img :src="checked ? activeIcon : inactiveIcon" />
         </template>
       </van-radio>
       <van-radio name="2">
         {{ t('radio') }} 2
         <template #icon="{ checked }">
-          <img :src="checked ? icon.active : icon.inactive" />
+          <img :src="checked ? activeIcon : inactiveIcon" />
         </template>
       </van-radio>
     </van-radio-group>
@@ -92,6 +92,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -120,8 +122,8 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       radio1: '1',
       radio2: '2',
       radio3: '1',
@@ -131,10 +133,12 @@ export default {
       radioShape: '1',
       radioIconSize: '1',
       radioHorizontal: '1',
-      icon: {
-        active: 'https://img.yzcdn.cn/vant/user-active.png',
-        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
-      },
+    });
+
+    return {
+      ...toRefs(state),
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
     };
   },
 };