From 56047bb655b899efc038f9e4cc8f1c847a0a0995 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 6 Dec 2020 17:05:55 +0800
Subject: [PATCH] docs(Search): use composition api

---
 src/search/README.md       | 31 +++++++++++++++++--------------
 src/search/README.zh-CN.md | 31 +++++++++++++++++--------------
 src/search/demo/index.vue  | 29 +++++++++++++++++++----------
 3 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/src/search/README.md b/src/search/README.md
index 6ffd2935a..bca28d860 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -19,11 +19,12 @@ app.use(Search);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 ```
@@ -45,21 +46,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-  methods: {
-    onSearch(val) {
+  setup() {
+    const value = ref('');
+    const onSearch = (val) => {
       Toast(val);
-    },
-    onCancel() {
+    };
+    const onCancel = () => {
       Toast('Cancel');
-    },
+    };
+    return {
+      value,
+      onSearch,
+      onCancel,
+    };
   },
 };
 ```
diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md
index 46c521160..f8181ce6e 100644
--- a/src/search/README.zh-CN.md
+++ b/src/search/README.zh-CN.md
@@ -25,11 +25,12 @@ app.use(Search);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 ```
@@ -51,21 +52,23 @@ Search 组件提供了 `search` 和 `cancel` 事件，`search` 事件在点击
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-  methods: {
-    onSearch(val) {
+  setup() {
+    const value = ref('');
+    const onSearch = (val) => {
       Toast(val);
-    },
-    onCancel() {
+    };
+    const onCancel = () => {
       Toast('取消');
-    },
+    };
+    return {
+      value,
+      onSearch,
+      onCancel,
+    };
   },
 };
 ```
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index bb3c3a69d..20011ab8d 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -52,6 +52,10 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -74,25 +78,30 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const t = useTranslate();
+    const state = reactive({
       value1: '',
       value2: '',
       value3: '',
       value4: '',
       value5: '',
       value6: '',
+    });
+
+    const onSearch = (val) => {
+      Toast(val);
     };
-  },
 
-  methods: {
-    onSearch(val) {
-      this.$toast(val);
-    },
+    const onCancel = () => {
+      Toast(t('cancel'));
+    };
 
-    onCancel() {
-      this.$toast(this.t('cancel'));
-    },
+    return {
+      ...toRefs(state),
+      onSearch,
+      onCancel,
+    };
   },
 };
 </script>