vue3通过el-dropdown实现动态菜单切换页面

这是效果图

首先是主页index.vue

<template><el-row><el-col :span="20"><!-- 顶部菜单 --><div v-if="showTop"><topmenu /></div><!-- 右侧下方区域动态切换的内容 --><div style="flex: 1;"><component :is="currentComponent" /></div></el-col></el-row>
</template><script setup>
import {onMounted, shallowRef} from 'vue';
import Topmenu from "./station/topmenu";const currentComponent = shallowRef(signal);//主动监听事件
onMounted(() => {window.addEventListener('componentChange', (event) => {const component = event.detail;// 在这里处理接收到的组件或其他数据currentComponent.value = component;});
});getStationList()
</script>

接下来是菜单页面menu.vue

<template><div style="width: 100%; margin-top: 10px; display: flex; align-items: center; border-bottom: 1px solid #ccc;"><el-dropdown v-for="(dropdown, index) in dropdowns" :key="index"><el-buttoncolor="#f0f0f0":dark="true"@click="handleSelect(dropdown.id)":style="{ 'background-color': buttonTransparency[dropdown.index] ? 'transparent' : '#f0f0f0' }">{{ dropdown.text }}<el-icon v-if="buttonTransparency[dropdown.index]" class="el-icon--right"></el-icon></el-button><template #dropdown><el-dropdown-menu class="transparent-bg"><el-dropdown-item v-for="(item, i) in dropdown.items" :key="i" @click="handleSelect(item.id)">{{ item.text }}</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div>
</template><script setup>
import {useRouter} from 'vue-router';
import signal from '@/views/drawing/station/index';//这里导入vue页面
import one from '@/views/drawing/test/one';
import two from '@/views/drawing/test/two';const router = useRouter();const buttonTransparency = ref([true, false, false, false, false, false]); // 6个按钮的透明状态const dropdowns = [{id: '1',text: '菜单1',items: [],index: 0},{id: '2',text: '菜单2',items: [{ id: '2-1', text: '子菜单1' },{ id: '2-2', text: '子菜单2' },],index: 1},{id: '3',text: '菜单3',items: [{ id: '3-1', text: '子菜单1' },{ id: '3-2', text: '子菜单2' },],index: 2}
];const handleSelect = (index) => {if (index === '1') {//这里对应菜单idupdateButtonTransparency(0);//这里对应数组下标，从0开始emitComponentChange(signal);//这里对应上面导入的vue页面} else if (index === '2') {updateButtonTransparency(1)} else if (index === '2-1') {emitComponentChange(one);} else if (index === '2-2') {emitComponentChange(two);} else if (index === '3') {updateButtonTransparency(2)}
};const updateButtonTransparency = (index) => {// 点击某个按钮，该按钮的透明状态变化，其他按钮恢复原状buttonTransparency.value = buttonTransparency.value.map((_, i) => i === index);
};const emitComponentChange = (component) => {// 触发自定义事件，传递组件或其他数据const event = new CustomEvent('componentChange', {detail: component});window.dispatchEvent(event);
};</script><style scoped></style>