feat: 搜索框

src/sites/doc/components/Header.vue

@@ -6,9 +6,7 @@
       <span class="logo-border"></span>
     </div>
     <div class="header-nav">
-      <div class="search-box">
-        <input type="text" class="search-input" placeholder="在 NutUI 中搜索" />
-      </div>
+      <Search />
       <div class="nav-box">
         <ul class="nav-list">
           <li class="nav-item" :class="{ active: isActive(header[0].name) }">
@@ -63,10 +61,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive, computed } from 'vue';
+import Search from './Search.vue';
 import { header } from '@/config';
 import { currentRoute, themeColor } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-header',
+  components: {
+    Search
+  },
   setup() {
     const data = reactive({
       theme: 'black',
@@ -172,17 +174,6 @@ export default defineComponent({
     width: calc(100% - 240px);
     min-width: 900px;
     padding: 0 40px;
-    .search-box {
-      font-size: 0;
-      .search-input {
-        height: 22px;
-        padding-left: 42px;
-        font-size: 14px;
-        vertical-align: middle;
-        background: transparent url('../../assets/images/input-search.png')
-          no-repeat;
-      }
-    }
     .nav-box {
       margin-right: 140px;
       .nav-list {

src/sites/doc/components/Search.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="search-box">
+    <input
+      type="text"
+      class="search-input"
+      placeholder="在 NutUI 中搜索"
+      v-model="data.searchVal"
+      @focus="onfocus"
+      @keyup="choseList"
+    />
+    <ul class="search-list" v-if="data.searchList.length > 0">
+      <li
+        :class="data.searchCurName == item.name ? 'cur' : ''"
+        @click="checklist(item)"
+        v-for="(item, index) in data.searchList"
+        :key="index"
+      >
+        <router-link :to="item.name.toLowerCase()">
+          {{ item.name }}
+          <span>{{ item.cName }}</span>
+        </router-link>
+        <!-- <router-link v-if="!_package.isLink" :to="_package.name.toLowerCase()">{{ _package.cName }}</router-link> -->
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { defineComponent, reactive, onMounted, watch } from 'vue';
+import { nav } from '@/config.js';
+export default defineComponent({
+  name: 'search',
+  setup() {
+    const data = reactive({
+      nav,
+      navList: [],
+      searchIndex: 0,
+      searchList: [],
+      searchVal: '',
+      searchCName: ''
+    });
+    onMounted(() => {
+      const files = require.context('@/packages', true, /doc\.md$/);
+      files.keys().forEach(component => {
+        const componentEntity = files(component).default;
+      });
+      // console.log('nav', nav);
+      nav.forEach(item => {
+        item.packages.forEach(value => {
+          // console.log('value', value)
+          data.navList.push(value);
+        });
+        console.log('search', data.navList);
+      });
+    });
+    watch(
+      () => data.searchVal,
+      sVal => {
+        console.log(sVal, '改变');
+        if (sVal) {
+          data.searchList = data.navList.filter(item => {
+            if (item.show === false) return false;
+            console.log('item', item);
+            const rx = new RegExp(sVal, 'gi');
+            return rx.test(item.name + ' ' + item.cName + '' + item.desc);
+          });
+          console.log('rx2', data.searchList.length, data.searchList);
+        } else {
+          data.searchCName = '';
+          data.searchIndex = 0;
+          data.searchList = [];
+        }
+      }
+    );
+    const onfocus = e => {
+      e.target.select();
+      // console.log('e', e.target.select())
+    };
+    const choseList = e => {
+      data.searchIndex = 0;
+    };
+    return {
+      data,
+      onfocus,
+      choseList
+    };
+  }
+});
+</script>
+<style lang="scss">
+.search-box {
+  position: relative;
+  min-width: 300px;
+  height: 22px;
+  line-height: 22px;
+  .search-input {
+    height: 22px;
+    padding-left: 42px;
+    font-size: 14px;
+    vertical-align: middle;
+    background: transparent url('../../assets/images/input-search.png')
+      no-repeat;
+    font-size: 14px;
+    color: #fff;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+.search-list {
+  background: #fff;
+  position: absolute;
+  width: 300px;
+  list-style: none;
+  border: 1px solid #f2f2f2;
+  z-index: 99999;
+  top: 27px;
+  padding: 0;
+  li {
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+    a {
+      display: inline-block;
+      box-sizing: border-box;
+      width: 100%;
+      padding-left: 40px;
+      text-decoration: none;
+      color: #666;
+    }
+    &:hover {
+      // background: #6096ff;
+      color: #fa2c19;
+      a {
+        color: #fa2c19;
+      }
+    }
+  }
+  .cur {
+    background: #6096ff;
+    color: #fff;
+    a {
+      color: #fff;
+    }
+  }
+}
+</style>