add

src/layout/components/Search/index.vue

@@ -9,15 +9,34 @@
 <template>
   <div class="pub-search">
     <div class="flex">
-      <div v-if="isTitle" :class="isChild ? 'childTitle':''" class="title">{{ title }}</div>
+      <div v-if="isTitle" :class="isChild ? 'childTitle' : ''" class="title">
+        {{ title }}
+      </div>
       <div v-if="isOnly" class="content flex-wrap">
-        <div v-if="isSearch" :class="isChild ? 'childSearch':''" class="search">
-          <el-input :size="isChild ? 'medium':''" :placeholder="placeholder" @clear="clearSearch" clearable v-model="input">
+        <div
+          v-if="isSearch"
+          :class="isChild ? 'childSearch' : ''"
+          class="search"
+        >
+          <el-input
+            :size="isChild ? 'medium' : ''"
+            :placeholder="placeholder"
+            @clear="clearSearch"
+            clearable
+            v-model="input"
+            @keyup.enter.native="checkSearch"
+          >
             <el-button slot="prepend" icon="el-icon-search"></el-button>
           </el-input>
         </div>
         <div v-if="isSearch" class="btn">
-          <button :class="isChild ? 'childBtnAn':''" @click="checkSearch" class="btnAn">搜索</button>
+          <button
+            :class="isChild ? 'childBtnAn' : ''"
+            @click="checkSearch"
+            class="btnAn"
+          >
+            搜索
+          </button>
         </div>
         <div v-if="isSlot" class="add">
           <slot></slot>
@@ -29,64 +48,64 @@
 
 <script>
 export default {
-  name: 'PubSearch',
+  name: "PubSearch",
   props: {
     //title
     title: {
       type: String,
-      default: ''
+      default: "",
     },
     //placeholder
     placeholder: {
       type: String,
-      default: '请输入内容'
+      default: "请输入内容",
     },
     //是否只显示title
     isOnly: {
       type: Boolean,
-      default: true
+      default: true,
     },
     //是否显示搜索
     isSearch: {
       type: Boolean,
-      default: true
+      default: true,
     },
     //是否显示插槽
     isSlot: {
       type: Boolean,
-      default: false
+      default: false,
     },
     //是否title
     isTitle: {
       type: Boolean,
-      default: false
+      default: false,
     },
     //是否二级页面搜索
     isChild: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  data () {
+  data() {
     return {
-      input: ''
-    }
+      input: "",
+    };
   },
-  created () {
-    const { keyWords } = this.$route.query
+  created() {
+    const { keyWords } = this.$route.query;
     if (keyWords) {
-      this.input = keyWords
+      this.input = keyWords;
     }
   },
   methods: {
-    checkSearch () {
-      this.$emit('getSearchData', this.input)
+    checkSearch() {
+      this.$emit("getSearchData", this.input);
     },
-    clearSearch () {
-      this.$emit('clearSearchData', this.input)
-    }
-  }
-}
+    clearSearch() {
+      this.$emit("clearSearchData", this.input);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>