seach 封装

src/components/SearchInput.vue

+<template>
+  <form action="/">
+    <van-search class="common_search" v-model="searchValue" v-on="$listeners" v-bind="$attrs" />
+  </form>
+</template>
+<script>
+
+export default {
+  name: 'SearchInput',
+  props: {
+    keyword: String
+  },
+  model: {
+    prop: ['keyword']
+  },
+  data() {
+    return {
+      searchValue: null
+    }
+  },
+  watch: {
+    searchValue(val) {
+      this.$emit('input', val)
+    },
+    keyword(val) {
+      this.searchValue = val
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "~@/assets/css/search.less";
+</style>
\ No newline at end of file

src/views/user/nationality/index.vue

@@ -3,7 +3,7 @@
     {{$t('person.nickName')}}
     {{$t('person.nickName')}}
     <NafmHeader :title="$t('title.nationality')" navClass="nafmii-head-bg3">
     <NafmHeader :title="$t('title.nationality')" navClass="nafmii-head-bg3">
       <template #bottom>
       <template #bottom>
-        <van-search v-model="keyword" class="common_search" :placeholder="$t('person.country')" />
+        <SearchInput v-model="keyword"  :placeholder="$t('person.country')" @search="handleSearch" />
       </template>
       </template>
     </NafmHeader>
     </NafmHeader>
     <div class="search_content" ref="searchContent" v-show="keyword">
     <div class="search_content" ref="searchContent" v-show="keyword">
@@ -24,12 +24,12 @@
 </template>
 </template>
 <script>
 <script>
 import BScroll from 'better-scroll'
 import BScroll from 'better-scroll'
-import SearchFirst from '@/components/SearchFirst.vue'
+import SearchInput from '@/components/SearchInput.vue'
 import data from './city.json'
 import data from './city.json'
 export default {
 export default {
   name: 'Nationality',
   name: 'Nationality',
   components: {
   components: {
-    SearchFirst
+    SearchInput
   },
   },
   data() {
   data() {
     return {
     return {
@@ -93,6 +93,9 @@ export default {
       console.log('value', value)
       console.log('value', value)
       // 接口请求 返回上页
       // 接口请求 返回上页
       this.$router.back()
       this.$router.back()
+    },
+    handleSearch(v){
+      console.log('handleSeach',v)
     }
     }
   }
   }
 }
 }