feat(sidebar): pull out search component

re #384

Author: vanoneang

package-lock.json

@@ -19,7 +19,7 @@
     "axios": "~0.18.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
-    "element-plus": "^1.0.1-beta.19",
+    "element-plus": "^1.0.2-beta.36",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",

package.json

@@ -0,0 +1,115 @@
+<template>
+  <div v-if="showSidebarSearch" style="margin-top: 15px">
+    <div class="search-display" v-if="!showSearchList" @click="toSearch"><i class="el-icon-search"></i></div>
+    <el-select
+      clearable
+      filterable
+      size="medium"
+      class="search"
+      v-model="sidebar"
+      ref="searchInput"
+      v-if="showSearchList"
+      :filter-method="search"
+      @change="handleChange"
+      placeholder="请输入关键字"
+    >
+      <el-option v-for="item in groups" :key="item.key" :label="item.title" :value="item.path"> </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import emitter from 'lin/util/emitter'
+
+import Config from '@/config/index'
+
+export default {
+  data() {
+    return {
+      groups: [],
+      sidebar: '',
+      showSearchList: false,
+      showSidebarSearch: Config.showSidebarSearch,
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebarList']),
+  },
+  mounted() {
+    emitter.on('removeSidebarSearch', () => {
+      this.showSidebarSearch = false
+    })
+    emitter.on('showSidebarSearch', () => {
+      if (Config.showSidebarSearch) {
+        this.showSidebarSearch = true
+      }
+    })
+  },
+  methods: {
+    handleChange(val) {
+      this.groups = []
+      this.sidebar = ''
+      this.showSearchList = false
+      this.$router.push(val)
+    },
+    toSearch() {
+      this.showSearchList = true
+      setTimeout(() => {
+        this.$refs.searchInput.focus()
+      }, 200)
+    },
+    search(val) {
+      this.groups = []
+
+      // 深度遍历配置树, 摘取叶子节点作为路由部分
+      function deepTravel(config, fuc) {
+        if (Array.isArray(config)) {
+          config.forEach(subConfig => {
+            deepTravel(subConfig, fuc)
+          })
+        } else if (config.children) {
+          config.children.forEach(subConfig => {
+            deepTravel(subConfig, fuc)
+          })
+        } else {
+          fuc(config)
+        }
+      }
+
+      deepTravel(this.sidebarList, viewConfig => {
+        // 构造舞台view路由
+        if (viewConfig.title.includes(val)) {
+          const viewRouter = {}
+          viewRouter.path = viewConfig.path
+          viewRouter.title = viewConfig.title
+          viewRouter.key = Math.random()
+          this.groups.push(viewRouter)
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.search-display {
+  position: relative;
+  width: 80%;
+  margin: 0 auto;
+  height: 36px;
+  border-bottom: 1px rgb(185, 190, 195) solid;
+  cursor: pointer;
+
+  .el-icon-search {
+    position: absolute;
+    left: 1px;
+    top: 10px;
+    color: rgb(185, 190, 195);
+  }
+}
+
+.search {
+  width: 80%;
+}
+</style>

src/component/layout/sidebar/search.vue

@@ -2,23 +2,7 @@
   <div class="app-sidebar">
     <logo :elMenuCollapse="elMenuCollapse" />
     <div style="margin-bottom:50px">
-      <div v-if="showSidebarSearch" style="margin-top: 15px">
-        <div class="search-display" v-if="!showSearchList" @click="toSearch"><i class="el-icon-search"></i></div>
-        <el-select
-          v-if="showSearchList"
-          size="medium"
-          filterable
-          clearable
-          :filter-method="search"
-          v-model="sidebar"
-          @change="handleChange"
-          class="search"
-          placeholder="请输入关键字"
-          ref="searchInput"
-        >
-          <el-option v-for="item in groups" :key="item.key" :label="item.title" :value="item.path"> </el-option>
-        </el-select>
-      </div>
+      <search></search>
       <el-menu
         ref="meun"
         class="el-menu-vertical-demo"
@@ -36,21 +20,13 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import emitter from 'lin/util/emitter'
-import Config from '@/config/index'
-import MenuTree from './menu-tree'
+
 import Logo from './logo'
+import Search from './search'
+import MenuTree from './menu-tree'
 
 export default {
-  components: { MenuTree, Logo },
-  data() {
-    return {
-      sidebar: '',
-      groups: [],
-      showSearchList: false,
-      showSidebarSearch: Config.showSidebarSearch,
-    }
-  },
+  components: { MenuTree, Logo, Search },
   props: {
     isPhone: {
       type: Boolean,
@@ -61,69 +37,11 @@ export default {
       default: false,
     },
   },
-  mounted() {
-    emitter.on('removeSidebarSearch', () => {
-      this.showSidebarSearch = false
-    })
-    emitter.on('showSidebarSearch', () => {
-      if (Config.showSidebarSearch) {
-        this.showSidebarSearch = true
-      }
-    })
-  },
-  methods: {
-    handleChange(val) {
-      this.groups = []
-      this.sidebar = ''
-      this.showSearchList = false
-      this.$router.push(val)
-    },
-    toSearch() {
-      this.showSearchList = true
-      setTimeout(() => {
-        this.$refs.searchInput.focus()
-      }, 200)
-    },
-    search(val) {
-      // if (!val) {
-      //   this.showSearchList = false
-      //   return
-      // }
-      this.groups = []
-
-      // 深度遍历配置树, 摘取叶子节点作为路由部分
-      function deepTravel(config, fuc) {
-        if (Array.isArray(config)) {
-          config.forEach(subConfig => {
-            deepTravel(subConfig, fuc)
-          })
-        } else if (config.children) {
-          config.children.forEach(subConfig => {
-            deepTravel(subConfig, fuc)
-          })
-        } else {
-          fuc(config)
-        }
-      }
-
-      deepTravel(this.sidebarList, viewConfig => {
-        // 构造舞台view路由
-        if (viewConfig.title.includes(val)) {
-          const viewRouter = {}
-          viewRouter.path = viewConfig.path
-          viewRouter.title = viewConfig.title
-          viewRouter.key = Math.random()
-          this.groups.push(viewRouter)
-        }
-      })
-    },
-  },
   computed: {
     elMenuCollapse() {
       if (this.isPhone) {
         return false
       }
-
       return this.isCollapse
     },
     /**
@@ -151,26 +69,5 @@ export default {
     width: 0px;
     height: 0px;
   }
-
-  .search-display {
-    position: relative;
-    width: 80%;
-    margin: 0 auto;
-    height: 36px;
-    border-bottom: 1px rgb(185, 190, 195) solid;
-    cursor: pointer;
-
-    .el-icon-search {
-      position: absolute;
-      left: 1px;
-      top: 10px;
-      color: rgb(185, 190, 195);
-    }
-  }
-
-  .search {
-    // margin-top: 20px;
-    width: 80%;
-  }
 }
 </style>