快捷導(dǎo)航

Vue實(shí)現(xiàn)全局菜單搜索框的示例

更新時(shí)間：2023年02月09日 10:00:43 作者：山山而川~xyj

本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

本篇文章分享一下我在實(shí)際開(kāi)發(fā) Vue 項(xiàng)目時(shí)遇到的需要 —— 全局菜單搜索。全局菜單搜索本質(zhì)是 router 的使用，該功能已經(jīng)實(shí)現(xiàn)，接下來(lái)分享一下開(kāi)發(fā)心得。

一、過(guò)濾路由

首先需要過(guò)濾出符合條件的路由信息，過(guò)濾的條件包含兩個(gè)：

路由可以顯示出現(xiàn)（hidden: false）
路由元信息中包含 title 屬性

代碼展示：

  /**
   * 篩選出可以在側(cè)邊欄顯示的路由
   * @param routes 路由
   * @param basePath 路徑
   * @param prefixTitle 標(biāo)題
   */
  const generateRoutes = (routes, basePath = '/', prefixTitle = []) => {
    let filterRoutes = []

    for (const route of routes) {
      // 如果路由已經(jīng)隱藏，跳過(guò)這次
      if (route.hidden) {
        continue
      }

      const data = {
        path: path.resolve(basePath, route.path),
        title: [...prefixTitle],
      }

      // 僅推送有標(biāo)題的路由
      if (route.meta && route.meta.title) {
        data.title = [...data.title, route.meta.title]

        if (route.redirect !== 'noReDirect') {
          filterRoutes.push(data)
        }
      }

      // 循環(huán)子路由
      if (route.children) {
        const childRoutes = generateRoutes(route.children, data.path, data.title)
        if (childRoutes.length >= 1) {
          filterRoutes = [...filterRoutes, ...childRoutes]
        }
      }
    }
    return filterRoutes
  }

注意：如果路由包含子路由，就要遞歸調(diào)用 generateRoutes 方法，在遞歸結(jié)束之后把符合條件的路由賦值給 filterRoutes，之后將其返回。

二、搜索框展示路由

實(shí)現(xiàn)搜索框使用的是 el-select 組件，在剛進(jìn)入頁(yè)面時(shí)需要在 onMounted 聲明周期中調(diào)用 generateRoutes 方法，將其賦值給變量 searchPool。

  onMounted(() => {
    searchPool.value = generateRoutes(JSON.parse(JSON.stringify(authRoute)))
  })

接下來(lái)，需要定義 el-select 組件的 遠(yuǎn)程搜索方法 和 change 事件。其中遠(yuǎn)程搜索方法 query 作用是把符合搜索結(jié)果的信息篩選出來(lái)賦值給 options，之后通過(guò)下拉選項(xiàng)展示這些信息。而 change 事件是當(dāng)選中路由時(shí)實(shí)現(xiàn)路由的跳轉(zhuǎn)并完成一些變量的初始化。

  // 搜索框的遠(yuǎn)程搜索方法
  const query = (queryVal) => {
    if (queryVal !== '') {
      options.value = fuse.value.search(queryVal)
    } else {
      options.value = []
    }
  }
  
  /**
   * 輸入框填充內(nèi)容觸發(fā)該方法
   * @param val 搜索框中輸入的值
   */
  const change = (val) => {
    if (val) {
      router.push({
        path: val,
      })
    }
    options.value = []
    search.value = ''
    isShowSearch.value = false
  }

三、雛形出現(xiàn)但有缺陷

經(jīng)過(guò)不斷探索，終于實(shí)現(xiàn)了一個(gè)全局菜單搜索框，但是這時(shí)我們會(huì)發(fā)現(xiàn)一個(gè) bug：

在這里插入圖片描述

這個(gè)問(wèn)題是必須要輸入完整的路由名稱(chēng)，路由才會(huì)在下拉框中展示，也就是說(shuō)沒(méi)有實(shí)現(xiàn)模糊查詢(xún)功能，接下來(lái)針對(duì)這一問(wèn)題進(jìn)行解決。

四、優(yōu)化搜索方式

路由搜索過(guò)程中沒(méi)有實(shí)現(xiàn)模糊搜索的功能，接下來(lái)將借助 fusejs 實(shí)現(xiàn)這一功能。fuse.js 具體用法請(qǐng)參照 Fuse 官網(wǎng)。
初始化 fuse:

  /**
   * fuse 實(shí)現(xiàn)模糊搜索
   * @param list 需要進(jìn)行模糊搜索的集合
   */
  const fuseInit = (list) => {
    fuse.value = new Fuse(list, {
      shouldSort: true,
      threshold: 0.4,
      location: 0,
      distance: 100,
      minMatchCharLength: 1,
      keys: [
        {
          name: 'title',
          weight: 0.7,
        },
        {
          name: 'path',
          weight: 0.3,
        },
      ],
    })
  }

另外，需要不斷監(jiān)聽(tīng) searchPool，當(dāng) searchPool 改變時(shí) 調(diào)用 fuseInit 方法。

  /**
   * 監(jiān)聽(tīng) searchPool
   */
  watch(searchPool, (list) => {
    fuseInit(list)
  })

添加了模糊搜索功能之后，全局菜單搜索框就基本實(shí)現(xiàn)，接下來(lái)看一下展示效果：

在這里插入圖片描述

五、完整代碼展示

<template>
  <div class="search">
    <el-tooltip content="菜單搜索" placement="bottom">
      <el-icon style="font-size: 20px"><Search @click="handleSearch" /></el-icon>
    </el-tooltip>
    <el-dialog
      v-model="isShowSearch"
      class="header_dialog"
      width="600px"
      destroy-on-close
      :show-close="false"
    >
      <el-select
        style="width: 100%"
        ref="headerSearchSelect"
        v-model="search"
        :remote-method="query"
        filterable
        default-first-option
        remote
        placeholder="菜單搜索 ：支持菜單名稱(chēng)、路徑"
        class="header_search_select"
        @change="change"
      >
        <el-option
          v-for="item in options"
          :key="item.item.path"
          :value="item.item.path"
          :label="
            item.item && item.item.title && item.item.title.length && item.item.title.join(' > ')
          "
        >
        </el-option>
      </el-select>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  import path from 'path-browserify'
  import Fuse from 'fuse.js'

  import authRoute from '@/router/modules/authRoute'

  const router = useRouter()
  const search = ref('')
  const isShowSearch = ref(false)
  const searchPool = ref([])
  const options = ref([])
  const fuse = ref(null)

  /**
   * fuse 實(shí)現(xiàn)模糊搜索
   * @param list 需要進(jìn)行模糊搜索的集合
   */
  const fuseInit = (list) => {
    fuse.value = new Fuse(list, {
      shouldSort: true,
      threshold: 0.4,
      location: 0,
      distance: 100,
      minMatchCharLength: 1,
      keys: [
        {
          name: 'title',
          weight: 0.7,
        },
        {
          name: 'path',
          weight: 0.3,
        },
      ],
    })
  }

  /**
   * 監(jiān)聽(tīng) searchPool
   */
  watch(searchPool, (list) => {
    fuseInit(list)
  })

  /**
   * 篩選出可以在側(cè)邊欄顯示的路由
   * @param routes 路由
   * @param basePath 路徑
   * @param prefixTitle 標(biāo)題
   */
  const generateRoutes = (routes, basePath = '/', prefixTitle = []) => {
    let filterRoutes = []

    for (const route of routes) {
      // 如果路由已經(jīng)隱藏，跳過(guò)這次
      if (route.hidden) {
        continue
      }

      const data = {
        path: path.resolve(basePath, route.path),
        title: [...prefixTitle],
      }

      // 僅推送有標(biāo)題的路由
      if (route.meta && route.meta.title) {
        data.title = [...data.title, route.meta.title]

        if (route.redirect !== 'noReDirect') {
          filterRoutes.push(data)
        }
      }

      // 循環(huán)子路由
      if (route.children) {
        const childRoutes = generateRoutes(route.children, data.path, data.title)
        if (childRoutes.length >= 1) {
          filterRoutes = [...filterRoutes, ...childRoutes]
        }
      }
    }
    return filterRoutes
  }

  /**
   * 控制搜索框的展示
   */
  const handleSearch = () => {
    isShowSearch.value = true
  }

  onMounted(() => {
    searchPool.value = generateRoutes(JSON.parse(JSON.stringify(authRoute)))
  })

  // 搜索框的遠(yuǎn)程搜索方法
  const query = (queryVal) => {
    if (queryVal !== '') {
      options.value = fuse.value.search(queryVal)
    } else {
      options.value = []
    }
  }

  /**
   * 輸入框填充內(nèi)容觸發(fā)該方法
   * @param val 搜索框中輸入的值
   */
  const change = (val) => {
    if (val) {
      router.push({
        path: val,
      })
    }
    options.value = []
    search.value = ''
    isShowSearch.value = false
  }
</script>
<style lang="scss" scoped>
  .search {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.el-dialog) {
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
      }
    }
    .header_search_select {
      height: 50px;
      :deep(.el-input__wrapper) {
        height: 50px;
      }
    }
  }
</style>