Vue3?Element-plus和el-menu無限級菜單組件如何封裝

Vue3 Element-plus和el-menu無限級菜單組件如何封裝

在現代的前端開發中，菜單組件是一個常見的需求，尤其是在管理后臺系統中。Element-plus 是一個基于 Vue3 的 UI 組件庫，提供了豐富的組件，其中 el-menu 是一個常用的菜單組件。然而，el-menu 默認只支持有限層級的菜單，對于需要無限級菜單的場景，我們需要對其進行封裝和擴展。

本文將詳細介紹如何使用 Vue3 和 Element-plus 封裝一個支持無限級菜單的 el-menu 組件。

1. 準備工作

首先，確保你已經安裝了 Vue3 和 Element-plus。如果還沒有安裝，可以通過以下命令進行安裝：

npm install vue@next
npm install element-plus

2. 基本結構

我們首先創建一個基本的 el-menu 組件，并在此基礎上進行擴展。

<template>
  <el-menu :default-active="activeIndex" mode="vertical">
    <el-menu-item index="1">首頁</el-menu-item>
    <el-submenu index="2">
      <template #title>產品</template>
      <el-menu-item index="2-1">產品1</el-menu-item>
      <el-menu-item index="2-2">產品2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  }
};
</script>

這是一個簡單的兩級菜單結構。接下來，我們需要將其擴展為支持無限級菜單。

3. 遞歸組件

為了實現無限級菜單，我們需要使用遞歸組件。遞歸組件是指組件在其模板中調用自身。我們可以通過遞歸的方式渲染菜單的每一級。

首先，我們定義一個 MenuItem 組件，用于渲染單個菜單項或子菜單。

<template>
  <el-menu-item v-if="!item.children" :index="item.index">
    {{ item.title }}
  </el-menu-item>
  <el-submenu v-else :index="item.index">
    <template #title>{{ item.title }}</template>
    <MenuItem
      v-for="child in item.children"
      :key="child.index"
      :item="child"
    />
  </el-submenu>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
};
</script>

在這個組件中，我們根據 item.children 是否存在來決定渲染 el-menu-item 還是 el-submenu。如果 item.children 存在，則遞歸渲染 MenuItem 組件。

4. 封裝無限級菜單組件

接下來，我們封裝一個 InfiniteMenu 組件，用于接收菜單數據并渲染整個菜單。

<template>
  <el-menu :default-active="activeIndex" mode="vertical">
    <MenuItem
      v-for="item in menuData"
      :key="item.index"
      :item="item"
    />
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  name: 'InfiniteMenu',
  components: {
    MenuItem
  },
  props: {
    menuData: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: String,
      default: '1'
    }
  }
};
</script>

在這個組件中，我們接收 menuData 作為菜單數據，并通過 v-for 循環渲染 MenuItem 組件。

5. 使用無限級菜單組件

最后，我們可以在父組件中使用 InfiniteMenu 組件，并傳入菜單數據。

<template>
  <InfiniteMenu :menu-data="menuData" />
</template>

<script>
import InfiniteMenu from './InfiniteMenu.vue';

export default {
  components: {
    InfiniteMenu
  },
  data() {
    return {
      menuData: [
        {
          index: '1',
          title: '首頁'
        },
        {
          index: '2',
          title: '產品',
          children: [
            {
              index: '2-1',
              title: '產品1'
            },
            {
              index: '2-2',
              title: '產品2',
              children: [
                {
                  index: '2-2-1',
                  title: '產品2-1'
                },
                {
                  index: '2-2-2',
                  title: '產品2-2'
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

在這個例子中，我們定義了一個包含多級子菜單的 menuData，并將其傳遞給 InfiniteMenu 組件進行渲染。

6. 總結

通過以上步驟，我們成功封裝了一個支持無限級菜單的 el-menu 組件。這個組件通過遞歸的方式渲染菜單的每一級，能夠靈活應對各種復雜的菜單結構。

在實際項目中，你可以根據需求進一步擴展這個組件，例如添加圖標、動態加載菜單數據等功能。希望本文對你有所幫助，祝你在 Vue3 和 Element-plus 的開發中取得更多成果！