index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div :class="{'show':show}" class="header-search">
  3. <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
  4. <el-select
  5. ref="headerSearchSelect"
  6. v-model="search"
  7. :remote-method="querySearch"
  8. filterable
  9. default-first-option
  10. remote
  11. placeholder="Search"
  12. class="header-search-select"
  13. @change="change"
  14. >
  15. <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
  16. </el-select>
  17. </div>
  18. </template>
  19. <script>
  20. // fuse is a lightweight fuzzy-search module
  21. // make search results more in line with expectations
  22. import Fuse from 'fuse.js/dist/fuse.min.js'
  23. import path from 'path'
  24. export default {
  25. name: 'HeaderSearch',
  26. data() {
  27. return {
  28. search: '',
  29. options: [],
  30. searchPool: [],
  31. show: false,
  32. fuse: undefined
  33. }
  34. },
  35. computed: {
  36. routes() {
  37. return this.$store.getters.permission_routes
  38. }
  39. },
  40. watch: {
  41. routes() {
  42. this.searchPool = this.generateRoutes(this.routes)
  43. },
  44. searchPool(list) {
  45. this.initFuse(list)
  46. },
  47. show(value) {
  48. if (value) {
  49. document.body.addEventListener('click', this.close)
  50. } else {
  51. document.body.removeEventListener('click', this.close)
  52. }
  53. }
  54. },
  55. mounted() {
  56. this.searchPool = this.generateRoutes(this.routes)
  57. },
  58. methods: {
  59. click() {
  60. this.show = !this.show
  61. if (this.show) {
  62. this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
  63. }
  64. },
  65. close() {
  66. this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
  67. this.options = []
  68. this.show = false
  69. },
  70. change(val) {
  71. const path = val.path;
  72. if(this.ishttp(val.path)) {
  73. // http(s):// 路径新窗口打开
  74. const pindex = path.indexOf("http");
  75. window.open(path.substr(pindex, path.length), "_blank");
  76. } else {
  77. this.$router.push(val.path)
  78. }
  79. this.search = ''
  80. this.options = []
  81. this.$nextTick(() => {
  82. this.show = false
  83. })
  84. },
  85. initFuse(list) {
  86. this.fuse = new Fuse(list, {
  87. shouldSort: true,
  88. threshold: 0.4,
  89. location: 0,
  90. distance: 100,
  91. maxPatternLength: 32,
  92. minMatchCharLength: 1,
  93. keys: [{
  94. name: 'title',
  95. weight: 0.7
  96. }, {
  97. name: 'path',
  98. weight: 0.3
  99. }]
  100. })
  101. },
  102. // Filter out the routes that can be displayed in the sidebar
  103. // And generate the internationalized title
  104. generateRoutes(routes, basePath = '/', prefixTitle = []) {
  105. let res = []
  106. for (const router of routes) {
  107. // skip hidden router
  108. if (router.hidden) { continue }
  109. const data = {
  110. path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
  111. title: [...prefixTitle]
  112. }
  113. if (router.meta && router.meta.title) {
  114. data.title = [...data.title, router.meta.title]
  115. if (router.redirect !== 'noRedirect') {
  116. // only push the routes with title
  117. // special case: need to exclude parent router without redirect
  118. res.push(data)
  119. }
  120. }
  121. // recursive child routes
  122. if (router.children) {
  123. const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
  124. if (tempRoutes.length >= 1) {
  125. res = [...res, ...tempRoutes]
  126. }
  127. }
  128. }
  129. return res
  130. },
  131. querySearch(query) {
  132. if (query !== '') {
  133. this.options = this.fuse.search(query)
  134. } else {
  135. this.options = []
  136. }
  137. },
  138. ishttp(url) {
  139. return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
  140. }
  141. }
  142. }
  143. </script>
  144. <style lang="scss" scoped>
  145. .header-search {
  146. font-size: 0 !important;
  147. .search-icon {
  148. cursor: pointer;
  149. font-size: 18px;
  150. vertical-align: middle;
  151. }
  152. .header-search-select {
  153. font-size: 18px;
  154. transition: width 0.2s;
  155. width: 0;
  156. overflow: hidden;
  157. background: transparent;
  158. border-radius: 0;
  159. display: inline-block;
  160. vertical-align: middle;
  161. ::v-deep .el-input__inner {
  162. border-radius: 0;
  163. border: 0;
  164. padding-left: 0;
  165. padding-right: 0;
  166. box-shadow: none !important;
  167. border-bottom: 1px solid #d9d9d9;
  168. vertical-align: middle;
  169. }
  170. }
  171. &.show {
  172. .header-search-select {
  173. width: 210px;
  174. margin-left: 10px;
  175. }
  176. }
  177. }
  178. </style>