重构水平导航菜单组件,采用 setup 语法糖并修复滚动条引用

src/layout/navMenu/horizontal.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="el-menu-horizontal-warp">
-		<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
+		<el-scrollbar @wheel.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
 			<el-menu router :default-active="defaultActive" :ellipsis="false" background-color="transparent" mode="horizontal">
 				<template v-for="val in menuLists">
 					<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
@@ -31,51 +31,59 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, nextTick, onBeforeMount } from 'vue';
+export default {
+	name: 'navMenuHorizontal',
+};
+</script>
+
+<script setup lang="ts">
+import { toRefs, reactive, computed, getCurrentInstance, onMounted, nextTick, onBeforeMount, ref } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import SubItem from '/@/layout/navMenu/subItem.vue';
 
-export default defineComponent({
+const props = defineProps({
-	name: 'navMenuHorizontal',
-	components: { SubItem },
-	props: {
 	menuList: {
 		type: Array,
 		default: () => [],
 	},
-	},
+});
-	setup(props) {
+
-		const { proxy } = <any>getCurrentInstance();
+const { proxy } = <any>getCurrentInstance();
-		const stores = useRoutesList();
+const stores = useRoutesList();
-		const storesThemeConfig = useThemeConfig();
+const storesThemeConfig = useThemeConfig();
-		const { routesList } = storeToRefs(stores);
+const { routesList } = storeToRefs(stores);
-		const { themeConfig } = storeToRefs(storesThemeConfig);
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const route = useRoute();
+const route = useRoute();
-		const state = reactive({
+const elMenuHorizontalScrollRef = ref();
+const state = reactive({
 	defaultActive: null,
-		});
+});
-		// 获取父级菜单数据
+
-		const menuLists = computed(() => {
+// 获取父级菜单数据
+const menuLists = computed(() => {
 	return <any>props.menuList;
-		});
+});
-		// 设置横向滚动条可以鼠标滚轮滚动
+
-		const onElMenuHorizontalScroll = (e: any) => {
+// 设置横向滚动条可以鼠标滚轮滚动
+const onElMenuHorizontalScroll = (e: any) => {
 	const eventDelta = e.wheelDelta || -e.deltaY * 40;
-			proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft = proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft + eventDelta / 4;
+	elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft + eventDelta / 4;
-		};
+};
-		// 初始化数据，页面刷新时，滚动条滚动到对应位置
+
-		const initElMenuOffsetLeft = () => {
+// 初始化数据，页面刷新时，滚动条滚动到对应位置
+const initElMenuOffsetLeft = () => {
 	nextTick(() => {
 		let els: any = document.querySelector('.el-menu.el-menu--horizontal li.is-active');
 		if (!els) return false;
-				proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft = els.offsetLeft;
+		elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = els.offsetLeft;
 	});
-		};
+};
-		// 路由过滤递归函数
+
-		const filterRoutesFun = (arr: Array<string>) => {
+// 路由过滤递归函数
+const filterRoutesFun = (arr: Array<string>) => {
 	return arr
 		.filter((item: any) => !item.meta.isHide)
 		.map((item: any) => {
@@ -83,9 +91,10 @@ export default defineComponent({
 			if (item.children) item.children = filterRoutesFun(item.children);
 			return item;
 		});
-		};
+};
-		// 传送当前子级数据到菜单中
+
-		const setSendClassicChildren = (path: string) => {
+// 传送当前子级数据到菜单中
+const setSendClassicChildren = (path: string) => {
 	const currentPathSplit = path.split('/');
 	let currentData: any = {};
 	filterRoutesFun(routesList.value).map((v, k) => {
@@ -97,9 +106,10 @@ export default defineComponent({
 		}
 	});
 	return currentData;
-		};
+};
-		// 设置页面当前路由高亮
+
-		const setCurrentRouterHighlight = (currentRoute: any) => {
+// 设置页面当前路由高亮
+const setCurrentRouterHighlight = (currentRoute: any) => {
 	const { path, meta } = currentRoute;
 	if (themeConfig.value.layout === 'classic') {
 		(<any>state.defaultActive) = `/${path.split('/')[1]}`;
@@ -108,17 +118,20 @@ export default defineComponent({
 		if (pathSplit.length >= 4 && meta.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
 		else state.defaultActive = path;
 	}
-		};
+};
-		// 页面加载前
+
-		onBeforeMount(() => {
+// 页面加载前
+onBeforeMount(() => {
 	setCurrentRouterHighlight(route);
-		});
+});
-		// 页面加载时
+
-		onMounted(() => {
+// 页面加载时
+onMounted(() => {
 	initElMenuOffsetLeft();
-		});
+});
-		// 路由更新时
+
-		onBeforeRouteUpdate((to) => {
+// 路由更新时
+onBeforeRouteUpdate((to) => {
 	// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
 	setCurrentRouterHighlight(to);
 	// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
@@ -126,14 +139,9 @@ export default defineComponent({
 	if (layout === 'classic' && isClassicSplitMenu) {
 		proxy.mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
 	}
-		});
-		return {
-			menuLists,
-			onElMenuHorizontalScroll,
-			...toRefs(state),
-		};
-	},
 });
+
+const { defaultActive } = toRefs(state);
 </script>
 
 <style scoped lang="scss">