Vue实现全局菜单搜索框的示例

更新时间：2023年02月09日 10:00:43 作者：山山而川~xyj

本文主要介绍了Vue实现全局菜单搜索框的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

本篇文章分享一下我在实际开发 Vue 项目时遇到的需要 —— 全局菜单搜索。全局菜单搜索本质是 router 的使用，该功能已经实现，接下来分享一下开发心得。

一、过滤路由

首先需要过滤出符合条件的路由信息，过滤的条件包含两个：

路由可以显示出现（hidden: false）
路由元信息中包含 title 属性

代码展示：

  /**
   * 筛选出可以在侧边栏显示的路由
   * @param routes 路由
   * @param basePath 路径
   * @param prefixTitle 标题
   */
  const generateRoutes = (routes, basePath = '/', prefixTitle = []) => {
    let filterRoutes = []

    for (const route of routes) {
      // 如果路由已经隐藏，跳过这次
      if (route.hidden) {
        continue
      }

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

      // 仅推送有标题的路由
      if (route.meta && route.meta.title) {
        data.title = [...data.title, route.meta.title]

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

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

注意：如果路由包含子路由，就要递归调用 generateRoutes 方法，在递归结束之后把符合条件的路由赋值给 filterRoutes，之后将其返回。

二、搜索框展示路由

实现搜索框使用的是 el-select 组件，在刚进入页面时需要在 onMounted 声明周期中调用 generateRoutes 方法，将其赋值给变量 searchPool。

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

接下来，需要定义 el-select 组件的 远程搜索方法 和 change 事件。其中远程搜索方法 query 作用是把符合搜索结果的信息筛选出来赋值给 options，之后通过下拉选项展示这些信息。而 change 事件是当选中路由时实现路由的跳转并完成一些变量的初始化。

  // 搜索框的远程搜索方法
  const query = (queryVal) => {
    if (queryVal !== '') {
      options.value = fuse.value.search(queryVal)
    } else {
      options.value = []
    }
  }
  
  /**
   * 输入框填充内容触发该方法
   * @param val 搜索框中输入的值
   */
  const change = (val) => {
    if (val) {
      router.push({
        path: val,
      })
    }
    options.value = []
    search.value = ''
    isShowSearch.value = false
  }

三、雏形出现但有缺陷

经过不断探索，终于实现了一个全局菜单搜索框，但是这时我们会发现一个 bug：

在这里插入图片描述

这个问题是必须要输入完整的路由名称，路由才会在下拉框中展示，也就是说没有实现模糊查询功能，接下来针对这一问题进行解决。

四、优化搜索方式

路由搜索过程中没有实现模糊搜索的功能，接下来将借助 fusejs 实现这一功能。fuse.js 具体用法请参照 Fuse 官网。
初始化 fuse:

  /**
   * fuse 实现模糊搜索
   * @param list 需要进行模糊搜索的集合
   */
  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,
        },
      ],
    })
  }

另外，需要不断监听 searchPool，当 searchPool 改变时调用 fuseInit 方法。

  /**
   * 监听 searchPool
   */
  watch(searchPool, (list) => {
    fuseInit(list)
  })

添加了模糊搜索功能之后，全局菜单搜索框就基本实现，接下来看一下展示效果：

在这里插入图片描述

五、完整代码展示

<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="菜单搜索 ：支持菜单名称、路径"
        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 实现模糊搜索
   * @param list 需要进行模糊搜索的集合
   */
  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,
        },
      ],
    })
  }

  /**
   * 监听 searchPool
   */
  watch(searchPool, (list) => {
    fuseInit(list)
  })

  /**
   * 筛选出可以在侧边栏显示的路由
   * @param routes 路由
   * @param basePath 路径
   * @param prefixTitle 标题
   */
  const generateRoutes = (routes, basePath = '/', prefixTitle = []) => {
    let filterRoutes = []

    for (const route of routes) {
      // 如果路由已经隐藏，跳过这次
      if (route.hidden) {
        continue
      }

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

      // 仅推送有标题的路由
      if (route.meta && route.meta.title) {
        data.title = [...data.title, route.meta.title]

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

      // 循环子路由
      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)))
  })

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

  /**
   * 输入框填充内容触发该方法
   * @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>

结论

到此这篇关于Vue实现全局菜单搜索框的示例的文章就介绍到这了,更多相关Vue 全局菜单搜索框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决vite build打包后页面不能正常访问的情况
这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue+js点击箭头实现图片切换
这篇文章主要为大家详细介绍了vue+js点击箭头实现图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue微信分享的实现(在当前页面分享其他页面)
这篇文章主要介绍了vue微信分享，在当前页面分享其他页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
深入浅析vue中cross-env的使用
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下
2019-09-09
关于下拉类型多选组件Vue-Treeselect(键名转换)
这篇文章主要介绍了关于下拉类型多选组件Vue-Treeselect(键名转换)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
在vue中实现低代码组件参数配置的流程步骤
这篇文章主要介绍了在vue中实现低代码组件参数配置的流程步骤，文中的代码示例讲解的非常详细，对我们的学习或工作有一定的参考价值,需要的朋友可以参考下
2023-07-07
Vue项目中Websocket的使用实例
WebSocket就诞生了,它最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,下面这篇文章主要给大家介绍了关于Vue项目中Websocket使用的相关资料,需要的朋友可以参考下
2023-02-02
Vue中的字符串模板的使用
本篇文章主要介绍了Vue中的字符串模板的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue实现移动端图片上传功能
这篇文章主要为大家详细介绍了vue实现移动端图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
vue3表单参数校验及正则表达式举例详解
最近项目中有一个校验身份证号手机号的业务,索性给大家总结下,这篇文章主要给大家介绍了关于vue3表单参数校验及正则表达式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04