Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

当然，下面是Vue3中封装Element Plus无限级菜单组件的详细代码攻略：

1. 安装Element Plus

首先，确保已经安装了Vue3和Element Plus。可以通过以下命令安装Element Plus：

npm install element-plus

2. 创建无限级菜单组件

在Vue3中，创建一个无限级菜单组件，可以使用<el-menu>和<el-submenu>组件来实现。以下是一个简单的示例：

<template>
  <el-menu :default-active=\"activeMenu\" mode=\"vertical\">
    <template v-for=\"item in menuData\">
      <el-submenu v-if=\"item.children\" :index=\"item.index\">
        <template #title>
          <i :class=\"item.icon\"></i>
          <span>{{ item.name }}</span>
        </template>
        <template v-for=\"child in item.children\">
          <el-menu-item :index=\"child.index\">{{ child.name }}</el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item v-else :index=\"item.index\">
        <i :class=\"item.icon\"></i>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'InfiniteMenu',
  props: {
    menuData: {
      type: Array,
      required: true,
    },
    activeMenu: {
      type: String,
      default: '',
    },
  },
});
</script>

在上述示例中，我们使用了<el-menu>和<el-submenu>组件来渲染菜单数据。通过v-for指令遍历menuData数组，根据是否有子菜单来渲染不同的组件。

3. 使用无限级菜单组件

在父组件中使用刚刚创建的无限级菜单组件，并传入菜单数据和当前激活的菜单项。以下是一个示例：

<template>
  <div>
    <infinite-menu :menu-data=\"menuData\" :active-menu=\"activeMenu\" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import InfiniteMenu from './InfiniteMenu.vue';

export default defineComponent({
  name: 'App',
  components: {
    InfiniteMenu,
  },
  data() {
    return {
      menuData: [
        {
          name: '菜单1',
          index: '1',
          icon: 'el-icon-s-grid',
        },
        {
          name: '菜单2',
          index: '2',
          icon: 'el-icon-s-check',
          children: [
            {
              name: '子菜单1',
              index: '2-1',
            },
            {
              name: '子菜单2',
              index: '2-2',
            },
          ],
        },
        {
          name: '菜单3',
          index: '3',
          icon: 'el-icon-s-flag',
        },
      ],
      activeMenu: '1',
    };
  },
});
</script>

在上述示例中，我们在父组件中引入了刚刚创建的无限级菜单组件，并传入菜单数据和当前激活的菜单项。

通过以上步骤，我们就可以在Vue3中封装Element Plus的无限级菜单组件了。希望以上攻略对您有所帮助。如果您有任何进一步的问题，请随时提问。