前言
本篇文章分享一下我在实际开发
Vue项目时遇到的需要 —— 全局菜单搜索。全局菜单搜索本质是router的使用，该功能已经实现，接下来分享一下开发心得。
一、过滤路由
首先需要过滤出符合条件的路由信息，过滤的条件包含两个：
- 路由可以显示出现（
hidden: false） - 路由元信息中包含
title属性
代码展示：
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 = []
}
}
const change = (val) => {
if (val) {
router.push({
path: val,
})
}
options.value = []
search.value = ''
isShowSearch.value = false
}
三、雏形出现但有缺陷
经过不断探索，终于实现了一个全局菜单搜索框，但是这时我们会发现一个 bug：
这个问题是必须要输入完整的路由名称，路由才会在下拉框中展示，也就是说没有实现模糊查询功能，接下来针对这一问题进行解决。
四、优化搜索方式
路由搜索过程中没有实现模糊搜索的功能，接下来将借助 fusejs 实现这一功能。fuse.js 具体用法请参照 Fuse 官网。
初始化 fuse:
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 方法。
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)
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,
},
],
})
}
watch(searchPool, (list) => {
fuseInit(list)
})
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 = []
}
}
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 全局菜单搜索框内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
