vue3 elementplus 动态菜单

Vue3和Element Plus是一对强力组合，能够提供丰富的功能和灵活的交互效果。其中，动态菜单是Element Plus很重要的一个特性，能够让用户自定义菜单，并且根据权限控制菜单的展示。下面将介绍如何在Vue3中使用Element Plus实现动态菜单。

首先，我们需要定义一份菜单数据，包括菜单的名称、路径、图标、权限等信息。可以使用Vue3中的Composition API来实现：

import { ref } from 'vue'

export default function useMenu() {
  const menus = ref([
    {name: '首页', path: '/', icon: 'el-icon-s-home', roles: ['admin', 'user']},
    {name: '设置', path: '/setting', icon: 'el-icon-setting', roles: ['admin']},
    {name: '个人中心', path: '/profile', icon: 'el-icon-s-custom', roles: ['user']}
  ]);

  return {
    menus
  }
}

然后，在菜单组件中，我们可以使用v-for和el-menu组件来渲染菜单：

<template>
  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
    <template v-for="menu in visibleMenus">
      <template v-if="!menu.children">
        <el-menu-item :key="menu.path" :index="menu.path">
          <i :class="menu.icon"></i>
          <span>{{ menu.name }}</span>
        </el-menu-item>
      </template>
      <template v-else>
        <el-submenu :key="menu.path" :index="menu.path">
          <template #title>
            <i :class="menu.icon"></i>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item v-for="(childMenu, index) in menu.children" :key="childMenu.path" :index="childMenu.path">
            <i :class="childMenu.icon"></i>
            <span>{{ childMenu.name }}</span>
          </el-menu-item>
        </el-submenu>
      </template>
    </template>
  </el-menu>
</template>

<script>
import useMenu from '@/hooks/useMenu';

export default {
  setup() {
    const { menus } = useMenu();

    const activeMenu = ref('/');
    const visibleMenus = computed(() => {
      const userRoles = ['admin']; // 假设当前用户的角色为admin
      return menus.filter(menu => {
        return menu.roles.some(role => userRoles.includes(role));
      });
    });

    function handleMenuSelect(index) {
      activeMenu.value = index;
    }

    return {
      activeMenu,
      visibleMenus,
      handleMenuSelect
    }
  }
}
</script>

在上述代码中，我们使用computed属性过滤展示可见的菜单，并使用ref属性记录当前活跃的菜单。当菜单被选择时，我们更新活跃菜单的值，从而使当前选项突出显示。

最后，我们可以将菜单组件添加到Vue3的路由中，以便它能够随着路由的变化进行动态更新。

总的来说，Vue3和Element Plus能够轻松实现动态菜单，为用户提供更加灵活和可控的交互体验。亲身体验后，你会感到非常满意！