docs(Search): update demo

src/search/demo/index.vue

@@ -1,25 +1,13 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-search v-model="value" :placeholder="$t('placeholder')" />
-    </demo-block>
-
-    <demo-block :title="$t('background')">
-      <van-search v-model="value" :placeholder="$t('placeholder')" background="#c8c9cc" />
-    </demo-block>
-
-    <demo-block :title="$t('disabled')">
-      <van-search v-model="value" :placeholder="$t('placeholder')" disabled />
-    </demo-block>
-
-    <demo-block :title="$t('inputAlign')">
-      <van-search placeholder="Placeholder" v-model="value" input-align="center" />
+      <van-search v-model="value1" :placeholder="$t('placeholder')" />
     </demo-block>
 
     <demo-block :title="$t('listenToEvents')">
       <form action="/">
         <van-search
-          v-model="value"
+          v-model="value5"
           :placeholder="$t('placeholder')"
           show-action
           @search="onSearch"
@@ -28,12 +16,32 @@
       </form>
     </demo-block>
 
+    <demo-block :title="$t('inputAlign')">
+      <van-search
+        v-model="value4"
+        :placeholder="$t('placeholder')"
+        input-align="center"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-search v-model="value3" :placeholder="$t('placeholder')" disabled />
+    </demo-block>
+
+    <demo-block :title="$t('background')">
+      <van-search
+        v-model="value2"
+        :placeholder="$t('placeholder')"
+        shape="round"
+        background="#4fc08d"
+      />
+    </demo-block>
+
     <demo-block :title="$t('customButton')">
       <van-search
-        v-model="value"
+        v-model="value6"
         :placeholder="$t('placeholder')"
         show-action
-        shape="round"
         :label="$t('label')"
         @search="onSearch"
       >
@@ -50,33 +58,38 @@ export default {
   i18n: {
     'zh-CN': {
       label: '地址',
+      disabled: '禁用搜索框',
+      inputAlign: '搜索框内容对齐',
+      background: '自定义背景色',
       placeholder: '请输入搜索关键词',
       customButton: '自定义按钮',
-      background: '自定义背景色',
-      inputAlign: '搜索框内容对齐',
       listenToEvents: '事件监听',
-      disabled: '禁用搜索框'
     },
     'en-US': {
       label: 'Address',
+      disabled: 'Disabled',
+      inputAlign: 'Input Align',
+      background: 'Custom Background Color',
       placeholder: 'Placeholder',
       customButton: 'Custom Action Button',
-      background: 'Custom Background Color',
-      inputAlign: 'Search Bar Content Alignment',
       listenToEvents: 'Listen to Events',
-      disabled: 'Disable Search Bar'
-    }
+    },
   },
 
   data() {
     return {
-      value: '',
+      value1: '',
+      value2: '',
+      value3: '',
+      value4: '',
+      value5: '',
+      value6: '',
     };
   },
 
   methods: {
-    onSearch() {
-      this.$toast(this.value);
+    onSearch(val) {
+      this.$toast(val);
     },
 
     onCancel() {