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-button
          color="#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') {//这里对应菜单id
    updateButtonTransparency(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>