侧边栏搜索

src/components/SearchInput.vue

+<template>
+  <div class="search-wrapper" :class="{ 'customer-bor': resultDisplay }">
+    <c-input
+      prefix-icon="el-icon-search"
+      placeholder="全局搜索"
+      v-model="searchContent"
+      @keyup.enter.native="searchEvent"
+      @keydown.up.native="preDownEvent"
+      @keyup.up.native="preUpEvent"
+      @keydown.down.native="nextDownEvent"
+      @keyup.down.native="nextUpEvent"
+      @focus="focusInput"
+      @blur="blurInput"
+    ></c-input>
+    <div
+      class="search-sug"
+      v-show="resultDisplay"
+      @mouseenter="isChoosing = true"
+      @mouseleave="isChoosing = false"
+    >
+      <ul>
+        <li
+          :class="{ 'sug-selected': item.selected }"
+          v-for="(item, idx) in searchResult"
+          :key="idx"
+          @mouseover="liOverEvent(idx)"
+          @mouseup.left="searchEvent(item.text)"
+        >
+          {{ item.text }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from "lodash/debounce";
+
+export default {
+  name: "SearchInput",
+  data() {
+    return {
+      searchContent: "",
+      searchResult: [],
+      selectedIndex: 0,
+      resultDisplay: false,
+      // 鼠标选择结果集的状态
+      isChoosing: false,
+      debounceWrapper: debounce(this.queryData, 500),
+    };
+  },
+  watch: {
+    searchContent: function(val, oldVal) {
+      // console.log(val, oldVal);
+      if (val.trim() === "") {
+        return;
+      }
+      if (this.searchResult.map(r => r.text).includes(val)) {
+        return;
+      }
+      this.debounceWrapper();
+    },
+  },
+  methods: {
+    queryData() {
+      const testData = [
+        { text: "打算大苏打", url: "" },
+        { text: "sfsdfsdfsd", url: "" },
+        { text: "是多少粉丝", url: "" },
+        { text: "士大夫大师傅士大夫", url: "" },
+        { text: "士大夫胜多负少", url: "" },
+        { text: "法国发过价格非常", url: "" },
+        { text: "让他换个风格和规范还没好v你", url: "" },
+        { text: "十分士大夫士大夫", url: "" },
+        { text: "v不错不错v吧", url: "" },
+        { text: "发的深入沟通和一个航班发", url: "" },
+        { text: "白飞飞更好发挥", url: "" },
+        { text: "价格和法国的", url: "" },
+        { text: "士大夫是任天堂", url: "" },
+        { text: "股份回购价款", url: "" },
+        { text: "分的高分很健康", url: "" },
+        { text: "热天语言同日u", url: "" },
+        { text: "微软谈好价格浮动", url: "" },
+        { text: "v成本v那么就会有投入广告费", url: "" },
+      ];
+      console.log("query data ..." + new Date().toLocaleString());
+      this.shuffle(testData);
+      const res = testData;
+      if (res && res.length > 0) {
+        this.resultDisplay = true;
+        this.searchResult = res;
+      } else {
+        this.searchResult = [];
+        this.resultDisplay = false;
+      }
+    },
+    shuffle(arr) {
+      let i = arr.length - 1;
+      while (i > 0) {
+        const n = (Math.random() * i) >>> 0;
+        [arr[n], arr[i]] = [arr[i], arr[n]];
+        i--;
+      }
+    },
+    searchEvent(val) {
+      if (typeof val === 'string') {
+        this.searchContent = val;
+      }
+      this.resultDisplay = false;
+      // TODO 
+      console.log("go to ...");
+    },
+    focusInput() {
+      if (this.searchResult.length > 0) {
+        this.resultDisplay = true;
+      }
+    },
+    blurInput() {
+      if (!this.isChoosing) {
+        this.resultDisplay = false;
+      }
+      this.selectedIndex = -1;
+      this.clearHighlightItem();
+    },
+    goNext() {
+      if (this.searchResult.length === 0) {
+        return;
+      }
+      if (this.selectedIndex >= this.searchResult.length - 1) {
+        this.selectedIndex = 0;
+      } else {
+        this.selectedIndex++;
+      }
+      this.highlightItem(this.selectedIndex, true);
+    },
+    goPre() {
+      if (this.searchResult.length === 0) {
+        return;
+      }
+      if (this.selectedIndex <= 0) {
+        this.selectedIndex = this.searchResult.length - 1;
+      } else {
+        this.selectedIndex--;
+      }
+      this.highlightItem(this.selectedIndex, true);
+    },
+    highlightItem(idx, changeVal) {
+      // console.log(idx);
+      const lis = this.$el.querySelectorAll(".search-sug ul li");
+      lis.forEach((li) => (li.className = ""));
+      if (lis[idx] && this.searchResult[idx]) {
+        lis[idx].className = "sug-selected";
+        if (changeVal) {
+          this.searchContent = this.searchResult[idx].text;
+        }
+      }
+    },
+    liOverEvent(idx) {
+      this.selectedIndex = idx;
+      this.highlightItem(idx, false);
+    },
+    clearHighlightItem() {
+      this.$el
+        .querySelectorAll(".search-sug ul li")
+        .forEach((li) => (li.className = ""));
+    },
+    /**
+     * up按下
+     */
+    preDownEvent() {
+      // console.log("up key: down");
+      this.goPre();
+    },
+    /**
+     * up弹起
+     */
+    preUpEvent() {
+      // console.log("up key: up");
+    },
+    /**
+     * down按下
+     */
+    nextDownEvent() {
+      // console.log("down key: down");
+      this.goNext();
+    },
+    /**
+     * down弹起
+     */
+    nextUpEvent() {
+      // console.log("down key: up");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.search-wrapper {
+  position: relative;
+}
+.search-wrapper >>> .el-input {
+  z-index: 2001;
+}
+.search-wrapper >>> .el-input .el-input__inner {
+  height: 30px;
+}
+.search-sug {
+  position: absolute;
+  width: 590px;
+  top: 28px;
+  border-radius: 0 0 10px 10px;
+  border: 2px solid #4e71f2;
+  box-shadow: none;
+  font-family: "Microsoft YaHei", Arial, sans-serif;
+  z-index: 2000;
+  background: #fff;
+}
+.search-sug ul {
+  margin: 7px 14px 0;
+  padding: 8px 0 7px;
+  background: 0 0;
+  border-top: 2px solid #f5f5f6;
+}
+.search-sug ul li {
+  list-style: none;
+  width: auto;
+  padding: 0 8px;
+  padding-left: 14px;
+  margin-left: -14px;
+  margin-right: -14px;
+  color: #626675;
+  font: 14px arial;
+  line-height: 28px;
+  background: 0 0;
+  font-family: "Microsoft YaHei", Arial, sans-serif;
+  position: relative;
+  cursor: pointer;
+}
+.search-sug ul li.sug-selected {
+  background-color: #f5f5f6;
+  color: #315efb;
+}
+.search-wrapper >>> .el-input__inner:focus {
+  border: 2px solid #4e71f2;
+  outline: 0;
+}
+.customer-bor >>> .el-input__inner {
+  border-bottom: 0 !important;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+</style>

src/components/index.js

@@ -29,6 +29,7 @@ import Cascader from "./Cascader.vue"
 import List from "./List"
 import ListSearch from "./ListSearch"
 import HighlightContent from "./HighlightContent"
+import SearchInput from "./SearchInput.vue"
 // 循环组件
 import MessageArea from '~/widget/SwfMessage/MessageArea'
 import CycList from '~/widget/SwfMessage/CycList'
@@ -81,6 +82,7 @@ export default {
         Vue.component("c-checkbox-group", CheckboxGroup)
         Vue.component("c-cascader", Cascader)
         Vue.component("c-highlight-content", HighlightContent)
+        Vue.component("c-search-input", SearchInput)
         Vue.component("c-paged-select", PagedSelect)
         Vue.component("c-function-btn", FunctionBtn)
         Vue.component("c-bus-button", BusinessButon)

src/views/Layout/SideMenu.vue

@@ -3,8 +3,9 @@
     <div class="eContainer-menu-search">
       <c-button icon="el-icon-s-fold" v-if="menuOpen" @click="closeMenu"></c-button>
       <c-button icon="el-icon-s-unfold" v-else @click="openMenu"></c-button>
-      <c-input prefix-icon="el-icon-search" v-if="menuOpen" v-model="searchContent"
-        @keyup.enter.native="searchMenuEvent" placeholder="全局搜索"></c-input>
+      <!-- <c-input prefix-icon="el-icon-search" v-if="menuOpen" v-model="searchContent"
+        @keyup.enter.native="searchMenuEvent" placeholder="全局搜索"></c-input> -->
+      <c-search-input></c-search-input>
     </div>
     <c-content :height="250">
       <img src="../../assets/menu_bottom.png" style="position: fixed; width: 200px; bottom: 0" />
@@ -197,7 +198,7 @@
     position: relative;
   }
 
-  .eContainer-menu-search .el-input {
+  .eContainer-menu-search .el-input, .eContainer-menu-search .search-wrapper {
     width: auto;
     position: absolute;
     right: 20px;
@@ -248,10 +249,6 @@
 </style>
 
 <style>
-  .eContainer-menu-search .el-input .el-input__inner {
-    height: 30px;
-  }
-
   .el-menu-vertical-demo.el-menu--collapse {
     width: 60px;
   }

src/views/Layout/index.vue

@@ -7,7 +7,7 @@
     </el-header>
     <div style="height: 8px"></div>
     <el-container>
-      <el-aside width="200px" style="background-color: white">
+      <el-aside width="240px" style="background-color: white">
         <sideMenu></sideMenu>
       </el-aside>
       <div style="width: 8px"></div>
@@ -45,7 +45,8 @@ export default {
 .el-aside {
   height: 100%;
   transition: width 300ms;
-  overflow: hidden;
+  /* overflow: hidden; */
+  overflow: unset;
   padding-bottom: 68px;
   box-sizing: border-box;
 }