docs(Switch): use composition api

src/switch/README.md

@@ -19,11 +19,12 @@ app.use(Switch);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const checked = ref(true);
-      checked: true,
+    return { checked };
-    };
   },
 };
 ```
@@ -59,21 +60,25 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+import { Dialog } from 'vant';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const checked = ref(true);
-      checked: true,
+    const onUpdateValue = (newValue) => {
-    };
-  },
-  methods: {
-    onUpdateValue(checked) {
       Dialog.confirm({
         title: 'Confirm',
         message: 'Are you sure to toggle switch?',
       }).then(() => {
-        this.checked = checked;
+        checked.value = newValue;
       });
-    },
+    };
+
+    return {
+      checked,
+      onUpdateValue,
+    };
   },
 };
 ```

src/switch/README.zh-CN.md

@@ -25,11 +25,12 @@ app.use(Switch);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const checked = ref(true);
-      checked: true,
+    return { checked };
-    };
   },
 };
 ```
@@ -75,21 +76,25 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+import { Dialog } from 'vant';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const checked = ref(true);
-      checked: true,
+    const onUpdateValue = (newValue) => {
-    };
-  },
-  methods: {
-    onUpdateValue(checked) {
       Dialog.confirm({
         title: '提醒',
         message: '是否切换开关？',
       }).then(() => {
-        this.checked = checked;
+        checked.value = newValue;
       });
-    },
+    };
+
+    return {
+      checked,
+      onUpdateValue,
+    };
   },
 };
 ```

src/switch/demo/index.vue

@@ -24,7 +24,7 @@
   </demo-block>
 
   <demo-block :title="t('asyncControl')">
-    <van-switch :model-value="checked4" @update:model-value="onInput" />
+    <van-switch :model-value="checked4" @update:model-value="onUpdateValue" />
   </demo-block>
 
   <demo-block :title="t('withCell')">
@@ -37,6 +37,10 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Dialog from '../../dialog';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -59,28 +63,30 @@ export default {
     },
   },
 
-  data() {
+  setup() {
-    return {
+    const t = useTranslate();
+    const state = reactive({
       checked: true,
       checked2: true,
       checked3: true,
       checked4: true,
       checked5: true,
       checked6: false,
-    };
-  },
-
-  methods: {
-    onInput(checked) {
-      this.$dialog
-        .confirm({
-          title: this.t('title'),
-          message: this.t('message'),
-        })
-        .then(() => {
-          this.checked4 = checked;
     });
-    },
+
+    const onUpdateValue = (checked) => {
+      Dialog.confirm({
+        title: t('title'),
+        message: t('message'),
+      }).then(() => {
+        state.checked4 = checked;
+      });
+    };
+
+    return {
+      ...toRefs(state),
+      onUpdateValue,
+    };
   },
 };
 </script>