Vue实现全局菜单搜索框的示例
作者:山山而川~xyj
前言
本篇文章分享一下我在实际开发
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 全局菜单搜索框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!