【VUE】Vue2菜单搜索并跳转指定页面

本文介绍: 有时候后台管理系统复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。菜单目录支持搜索并且可直接跳转便可以达到以上诉求。

有时候后台管理系统复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。

菜单目录支持搜索并且可直接跳转便可以达到以上诉求。

适用于 Vue2
基于 ruoyi
使用 elementUI
最多支持四层，可根据需要自行添加或者删除循环以增加或减少层级

&lt;template&gt;
	<div class="search"&gt;
		<!-- 搜索框 带放大镜图标 --&gt;
		<el-button icon="el-icon-search" @click="clickBtn">菜单搜索</el-button>

		<el-dialog
			width="600px"
			class="routerSelect_dialog"
			:visible.sync="isShowSearch"
			:show-close="false"
			:append-to-body="true"
		>
			<el-select
				style="width: 100%"
				ref="headerSearchSelect"
				v-model="searchValue"
				:remote-method="query"
				filterable
				default-first-option
				remote
				placeholder="请输入菜单名"
				class="header_search_select"
				@change="goPath"
			>
				<el-option
					v-for="(item, index) in routerList"
					:key="index"
					:value="item.path"
					:label="item.title"
				>
					<!-- 菜单图标 -->
					<svg-icon :icon-class="item.icon" style="margin: 5px 5px 0 0" />
					<!-- 菜单名称 -->
					{{ item.title }}
				</el-option>
			</el-select>
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	name: 'menuSearch',
	data() {
		return {
			searchValue: '',
			isShowSearch: false,
			menu: [],
			routerList: [],
		};
	},
	computed: {
		...mapGetters(['sidebarRouters']),
	},
	mounted() {
		this.getRouterList();
	},

	methods: {
		// 点击搜索按钮
		clickBtn() {
			this.isShowSearch = true;
			setTimeout(() => {
				// 点击搜索后默认弹出下拉框进行选择
				this.$refs.headerSearchSelect.focus();
			}, 500);
		},
		// 选中菜单后跳转到指定页面
		goPath(val) {
			this.$router.push(val);
			this.isShowSearch = false;
			this.searchValue = '';
		},
		// 处理路由信息 - 无标题、重定向、无子菜单项不处理
		getRouterList() {
			this.menu = this.sidebarRouters;
			for (let item1 of this.menu) {
				if (!item1.hidden &amp;&amp; item1.children &amp;&amp; item1.redirect === 'noRedirect') {
					for (let item2 of item1.children) {
						if (!item2.hidden &amp;&amp; item2.children) {
							for (let item3 of item2.children) {
								if (!item3.hidden &amp;&amp; item3.children) {
									for (let item4 of item3.children) {
										this.routerList.push({
											title:
												item1.meta.title +
												' > ' +
												item2.meta.title +
												' > ' +
												item3.meta.title +
												' > ' +
												item4.meta.title,
											path:
												item1.path.slice(1) +
												'/' +
												item2.path +
												'/' +
												item3.path +
												'/' +
												item4.path,
											icon: item1.meta.icon,
										});
									}
								} else if (!item3.hidden) {
									this.routerList.push({
										title:
											item1.meta.title +
											' > ' +
											item2.meta.title +
											' > ' +
											item3.meta.title,
										path:
											item1.path.slice(1) + '/' + item2.path + '/' + item3.path,
										icon: item1.meta.icon,
									});
								}
							}
						} else {
							this.routerList.push({
								title: item1.meta.title + ' > ' + item2.meta.title,
								path: item1.path.slice(1) + '/' + item2.path,
								icon: item1.meta.icon,
							});
						}
					}
				}
			}
		},
	},
};
</script>

<style lang="scss">
.search {
	height: 100%;

	button {
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.routerSelect_dialog {
	background: rgba(33, 85, 163, 0.16);
	backdrop-filter: blur(5px);
	.el-dialog {
		height: 35px;
		overflow: hidden;
		border-radius: 24px;
		background: rgba(1, 1, 1, 0);
		margin-top: 40vh !important; //搜索框居中
		.el-dialog__header {
			display: none;
		}
		.el-dialog__body {
			padding: 0 !important;
			margin-top: 0 !important;
		}
		.el-input,
		.is-focus {
			input {
				border: none;
			}
		}
	}
}
</style>