docs(Search): use composition api

src/search/README.md

@@ -19,11 +19,12 @@ app.use(Search);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const value = ref('');
-      value: '',
+    return { value };
-    };
   },
 };
 ```
@@ -45,21 +46,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const value = ref('');
-      value: '',
+    const onSearch = (val) => {
-    };
-  },
-  methods: {
-    onSearch(val) {
       Toast(val);
-    },
+    };
-    onCancel() {
+    const onCancel = () => {
       Toast('Cancel');
-    },
+    };
+    return {
+      value,
+      onSearch,
+      onCancel,
+    };
   },
 };
 ```

src/search/README.zh-CN.md

@@ -25,11 +25,12 @@ app.use(Search);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const value = ref('');
-      value: '',
+    return { value };
-    };
   },
 };
 ```
@@ -51,21 +52,23 @@ Search 组件提供了 `search` 和 `cancel` 事件，`search` 事件在点击
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const value = ref('');
-      value: '',
+    const onSearch = (val) => {
-    };
-  },
-  methods: {
-    onSearch(val) {
       Toast(val);
-    },
+    };
-    onCancel() {
+    const onCancel = () => {
       Toast('取消');
-    },
+    };
+    return {
+      value,
+      onSearch,
+      onCancel,
+    };
   },
 };
 ```

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() {
+  setup() {
-    return {
+    const t = useTranslate();
+    const state = reactive({
       value1: '',
       value2: '',
       value3: '',
       value4: '',
       value5: '',
       value6: '',
+    });
+
+    const onSearch = (val) => {
+      Toast(val);
     };
-  },
 
-  methods: {
+    const onCancel = () => {
-    onSearch(val) {
+      Toast(t('cancel'));
-      this.$toast(val);
+    };
-    },
 
-    onCancel() {
+    return {
-      this.$toast(this.t('cancel'));
+      ...toRefs(state),
-    },
+      onSearch,
+      onCancel,
+    };
   },
 };
 </script>