重构水平导航菜单组件,采用 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,49 +31,57 @@
 </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 stores = useRoutesList();
 const storesThemeConfig = useThemeConfig();
 const { routesList } = storeToRefs(stores);
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const route = useRoute();
+const elMenuHorizontalScrollRef = ref();
 const state = reactive({
 	defaultActive: null,
 });
+
 // 获取父级菜单数据
 const menuLists = computed(() => {
 	return <any>props.menuList;
 });
+
 // 设置横向滚动条可以鼠标滚轮滚动
 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 = () => {
 	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>) => {
 	return arr
@@ -84,6 +92,7 @@ export default defineComponent({
 			return item;
 		});
 };
+
 // 传送当前子级数据到菜单中
 const setSendClassicChildren = (path: string) => {
 	const currentPathSplit = path.split('/');
@@ -98,6 +107,7 @@ export default defineComponent({
 	});
 	return currentData;
 };
+
 // 设置页面当前路由高亮
 const setCurrentRouterHighlight = (currentRoute: any) => {
 	const { path, meta } = currentRoute;
@@ -109,14 +119,17 @@ export default defineComponent({
 		else state.defaultActive = path;
 	}
 };
+
 // 页面加载前
 onBeforeMount(() => {
 	setCurrentRouterHighlight(route);
 });
+
 // 页面加载时
 onMounted(() => {
 	initElMenuOffsetLeft();
 });
+
 // 路由更新时
 onBeforeRouteUpdate((to) => {
 	// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
@@ -127,13 +140,8 @@ export default defineComponent({
 		proxy.mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
 	}
 });
-		return {
+
-			menuLists,
+const { defaultActive } = toRefs(state);
-			onElMenuHorizontalScroll,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">