[VUE] Vue2 menu search and jump to the specified page

Sometimes the complex menu structure and deeper levels of the background management system make it difficult for users to quickly find the pages they need. How to improve the convenience of the background management system and make the interaction between the system and users more flexible has become a project beyond the basic functions. important pursuit.

The menu directory supports search and can be directly jumped to meet the above requirements.

• For Vue2
• Based on ruoyi
• Use elementUI
• Support up to four layers, you can add or delete loops to increase or decrease layers as needed

<template>
	<div class="search">
		<!-- 搜索框 带放大镜图标 -->
		<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 && item1.children && item1.redirect === 'noRedirect') {
					for (let item2 of item1.children) {
						if (!item2.hidden && item2.children) {
							for (let item3 of item2.children) {
								if (!item3.hidden && 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>