THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

181 lines
4.1 KiB

  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="item in options" :key="item.path" :value="item" :label="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'
  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. this.$router.push(val.path)
  72. this.search = ''
  73. this.options = []
  74. this.$nextTick(() => {
  75. this.show = false
  76. })
  77. },
  78. initFuse(list) {
  79. this.fuse = new Fuse(list, {
  80. shouldSort: true,
  81. threshold: 0.4,
  82. location: 0,
  83. distance: 100,
  84. maxPatternLength: 32,
  85. minMatchCharLength: 1,
  86. keys: [{
  87. name: 'title',
  88. weight: 0.7
  89. }, {
  90. name: 'path',
  91. weight: 0.3
  92. }]
  93. })
  94. },
  95. // Filter out the routes that can be displayed in the sidebar
  96. // And generate the internationalized title
  97. generateRoutes(routes, basePath = '/', prefixTitle = []) {
  98. let res = []
  99. for (const router of routes) {
  100. // skip hidden router
  101. if (router.hidden) { continue }
  102. const data = {
  103. path: path.resolve(basePath, router.path),
  104. title: [...prefixTitle]
  105. }
  106. if (router.meta && router.meta.title) {
  107. data.title = [...data.title, router.meta.title]
  108. if (router.redirect !== 'noRedirect') {
  109. // only push the routes with title
  110. // special case: need to exclude parent router without redirect
  111. res.push(data)
  112. }
  113. }
  114. // recursive child routes
  115. if (router.children) {
  116. const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
  117. if (tempRoutes.length >= 1) {
  118. res = [...res, ...tempRoutes]
  119. }
  120. }
  121. }
  122. return res
  123. },
  124. querySearch(query) {
  125. if (query !== '') {
  126. this.options = this.fuse.search(query)
  127. } else {
  128. this.options = []
  129. }
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss" scoped>
  135. .header-search {
  136. font-size: 0 !important;
  137. .search-icon {
  138. cursor: pointer;
  139. font-size: 18px;
  140. vertical-align: middle;
  141. }
  142. .header-search-select {
  143. font-size: 18px;
  144. transition: width 0.2s;
  145. width: 0;
  146. overflow: hidden;
  147. background: transparent;
  148. border-radius: 0;
  149. display: inline-block;
  150. vertical-align: middle;
  151. /deep/ .el-input__inner {
  152. border-radius: 0;
  153. border: 0;
  154. padding-left: 0;
  155. padding-right: 0;
  156. box-shadow: none !important;
  157. border-bottom: 1px solid #d9d9d9;
  158. vertical-align: middle;
  159. }
  160. }
  161. &.show {
  162. .header-search-select {
  163. width: 210px;
  164. margin-left: 10px;
  165. }
  166. }
  167. }
  168. </style>