直播app源码，默认显示搜索框保留搜索条件

<template><br>  <div :class="{'show':show}"><br>    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /><br>    <el-select<br>      ref="headerSearchSelect"<br>      v-model="search"<br>      :remote-method="querySearch"<br>      filterable<br>      default-first-option<br>      remote<br>      placeholder="菜单快捷搜索"<br>     <br>      @change="change"<br>    ><br>      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" /><br>    </el-select><br>  </div><br></template><br> <br><script><br>// fuse is a lightweight fuzzy-search module<br>// make search results more in line with expectations<br>import Fuse from 'fuse.js/dist/fuse.min.js'<br>import path from 'path'<br> <br>export default {<br>  name: 'HeaderSearch',<br>  data() {<br>    return {<br>      search: '',<br>      options: [],<br>      searchPool: [],<br>      show: true,//右上角搜索框 默认开启<br>      fuse: undefined<br>    }<br>  },<br>  computed: {<br>    routes() {<br>      return this.$store.getters.permission_routes<br>    }<br>  },<br>  watch: {<br>    routes() {<br>      this.searchPool = this.generateRoutes(this.routes)<br>    },<br>    searchPool(list) {<br>      this.initFuse(list)<br>    },<br>    show(value) {<br>      if (value) {<br>        document.body.addEventListener('click', this.close)<br>      } else {<br>        document.body.removeEventListener('click', this.close)<br>      }<br>    }<br>  },<br>  mounted() {<br>    this.searchPool = this.generateRoutes(this.routes)<br>  },<br>  methods: {<br>    click() {<br>      this.show = !this.show<br>      if (this.show) {<br>        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()<br>      }<br>    },<br>    close() {<br>      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()<br>      // this.options = [] //清空搜索结果；注释掉：保留上一次的搜索结果<br>      //this.show = false //false 关闭搜索框；注释掉：搜索框停留<br>    },<br>    change(val) {<br>      const path = val.path;<br>      if(this.ishttp(val.path)) {<br>        // http(s):// 路径新窗口打开<br>        const pindex = path.indexOf("http");<br>        window.open(path.substr(pindex, path.length), "_blank");<br>      } else {<br>        this.$router.push(val.path)<br>      }<br>      //this.search = '' //清空搜索词；注释掉：保留上一次的搜索词<br>      //this.options = [] //清空搜索结果；注释掉：保留上一次的搜索结果<br>      this.$nextTick(() => {<br>        //this.show = false //false 关闭搜索框；注释掉：搜索框停留<br>      })<br>    },<br>    initFuse(list) {<br>      this.fuse = new Fuse(list, {<br>        shouldSort: true,<br>        threshold: 0.4,<br>        location: 0,<br>        distance: 100,<br>        minMatchCharLength: 1,<br>        keys: [{<br>          name: 'title',<br>          weight: 0.7<br>        }, {<br>          name: 'path',<br>          weight: 0.3<br>        }]<br>      })<br>    },<br>    // Filter out the routes that can be displayed in the sidebar<br>    // And generate the internationalized title<br>    generateRoutes(routes, basePath = '/', prefixTitle = []) {<br>      let res = []<br> <br>      for (const router of routes) {<br>        // skip hidden router<br>        if (router.hidden) { continue }<br> <br>        const data = {<br>          path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,<br>          title: [...prefixTitle]<br>        }<br> <br>        if (router.meta && router.meta.title) {<br>          data.title = [...data.title, router.meta.title]<br> <br>          if (router.redirect !== 'noRedirect') {<br>            // only push the routes with title<br>            // special case: need to exclude parent router without redirect<br>            res.push(data)<br>          }<br>        }<br> <br>        // recursive child routes<br>        if (router.children) {<br>          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)<br>          if (tempRoutes.length >= 1) {<br>            res = [...res, ...tempRoutes]<br>          }<br>        }<br>      }<br>      return res<br>    },<br>    querySearch(query) {<br>      if (query !== '') {<br>        this.options = this.fuse.search(query)<br>      } else {<br>        this.options = []<br>      }<br>    },<br>    ishttp(url) {<br>      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1<br>    }<br>  }<br>}<br></script><br> <br><style scoped><br>.header-search {<br>  font-size: 0 !important;<br> <br>  .search-icon {<br>    cursor: pointer;<br>    font-size: 18px;<br>    vertical-align: middle;<br>  }<br> <br>  .header-search-select {<br>    font-size: 18px;<br>    transition: width 0.2s;<br>    width: 0;<br>    overflow: hidden;<br>    background: transparent;<br>    border-radius: 0;<br>    display: inline-block;<br>    vertical-align: middle;<br> <br>    ::v-deep .el-input__inner {<br>      border-radius: 0;<br>      border: 0;<br>      padding-left: 0;<br>      padding-right: 0;<br>      box-shadow: none !important;<br>      border-bottom: 1px solid #d9d9d9;<br>      vertical-align: middle;<br>    }<br>  }<br> <br>  &.show {<br>    .header-search-select {<br>      width: 210px;<br>      margin-left: 10px;<br>    }<br>  }<br>}<br></style>