feat: 完成搜索框组件

jydocs-pc/src/components/Search.vue

@@ -2,15 +2,19 @@
     <div class="search-input">
         <el-input
                 placeholder="搜索文档"
-                v-model="input"
+                v-model.trim="input"
+                @keyup.enter.native="submitSearch"
                 clearable>
-            <el-button slot="append" icon="el-icon-jy-search"></el-button>
+            <el-button @click="submitSearch" slot="append" icon="el-icon-jy-search"></el-button>
         </el-input>
+        <el-tabs v-model="type">
+          <el-tab-pane v-for="item in tabs" :key="item.type" :label="item.label" :name="item.type"></el-tab-pane>
+        </el-tabs>
     </div>
 </template>
 
 <script>
-import { Input, Button } from 'element-ui'
+import { Input, Button, Tabs, TabPane } from 'element-ui'
 export default {
   name: 'Search-Input',
   props: {
@@ -18,11 +22,48 @@ export default {
   },
   components: {
     [Input.name]: Input,
+    [Tabs.name]: Tabs,
+    [TabPane.name]: TabPane,
     [Button.name]: Button
   },
   data () {
     return {
-      input: ''
+      input: '',
+      type: 'all1',
+      tabs: [
+        {
+          type: 'all1',
+          label: '全部'
+        },
+        {
+          type: 'all2',
+          label: '招标'
+        },
+        {
+          type: 'all3',
+          label: '法律法规'
+        },
+        {
+          type: 'all4',
+          label: '行业报告'
+        }
+      ]
+    }
+  },
+  beforeMount() {
+    const qUrl = this.$route.query
+    qUrl && qUrl.input && (this.input = qUrl.input)
+    qUrl && qUrl.type && (this.type = qUrl.type)
+  },
+  methods: {
+    submitSearch () {
+      if (!this.input.length) {
+        return
+      }
+      this.$emit('submit', {
+        type: this.type,
+        text: this.input
+      })
     }
   }
 }
@@ -33,17 +74,57 @@ export default {
         width: 640px;
         margin: 0 auto;
         @include diy-icon('search', 24);
+        ::v-deep .el-tabs__nav-wrap::after {
+          background-color: transparent;
+        }
+        ::v-deep .el-tabs__item {
+          height: 48px;
+          line-height: 48px;
+          font-size: 14px;
+          color: #686868;
+        }
+      ::v-deep .el-tabs__active-bar {
+        background-color: #2CB7CA;
+      }
+      ::v-deep .el-tabs__item.is-active {
+        color: #2CB7CA;
+      }
+      ::v-deep .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
+      ::v-deep .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+      ::v-deep .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+      ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+        padding-left: 20px;
+      }
+
+      ::v-deep .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
+      ::v-deep .el-tabs--bottom .el-tabs__item.is-top:last-child,
+      ::v-deep .el-tabs--top .el-tabs__item.is-bottom:last-child,
+      ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
+        padding-right: 20px;
+      }
+
         ::v-deep .el-input__inner {
             border-radius: 22px 0 0 22px;
             background: #FFFFFF;
             border: 1px solid #E0E0E0;
+            padding-left: 24px;
+            color: #1D1D1D;
+            font-family: Microsoft YaHei;
+            font-size: 16px;
+            line-height: 24px;
+            height: 42px;
         }
         ::v-deep .el-input-group__append {
+            height: 42px;
             box-sizing: border-box;
             text-align: center;
             border: none;
             border-radius: 0px 22px 22px 0px;
             background: #2CB7CA;
+            .el-button {
+              padding: 8px 24px;
+              margin-top: -4px;
+            }
         }
     }
 </style>

jydocs-pc/src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
 
-      <search-input></search-input>
+      <search-input @submit="goSubmit"></search-input>
 
       <h3>最新标讯</h3>
       <div class="new-list-group flex-r-c">
@@ -57,6 +57,12 @@ export default {
     }
   },
   methods: {
+    goSubmit (search) {
+      this.$router.push({
+        name: 'search',
+        query: search
+      })
+    },
     getTest () {
       this.fullscreenLoading = true
       ajaxGetTest().then(res => {

jydocs-pc/src/views/Search.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+      <search-input @submit="goSubmit"></search-input>
       <el-button @click="getTest" :loading="fullscreenLoading" type="primary">模拟Ajax</el-button>
       <el-button  @click="getLoginStatus" type="info">获取登录状态</el-button>
   </div>
@@ -8,10 +9,12 @@
 <script>
 import { ajaxGetTest } from '../api/modules/user'
 import { Button } from 'element-ui'
+import SearchInput from "../components/Search";
 
 export default {
   name: 'home',
   components: {
+    SearchInput,
     [Button.name]: Button
   },
   data () {
@@ -20,6 +23,13 @@ export default {
     }
   },
   methods: {
+    goSubmit (search) {
+      this.$router.replace({
+        name: 'search',
+        query: search
+      })
+      console.log(search)
+    },
     getTest () {
       this.fullscreenLoading = true
       ajaxGetTest().then(res => {