Vue3 封裝 Element Plus Menu 無限級菜單組件

来源:https://www.cnblogs.com/youyacoder/archive/2022/09/16/16701222.html
-Advertisement-
Play Games

本文分別使用 SFC（模板方式）和 tsx 方式對 Element Plus *el-menu* 組件進行二次封裝，實現配置化的菜單，有了配置化的菜單，後續便可以根據路由動態渲染菜單。 ...


本文分別使用 SFC（模板方式）和 tsx 方式對 Element Plus el-menu 組件進行二次封裝，實現配置化的菜單，有了配置化的菜單，後續便可以根據路由動態渲染菜單。

1 數據結構定義

1.1 菜單項數據結構

使用 element-plus el-menu 組件實現菜單，主要包括三個組件：

el-menu：整個菜單；
el-sub-menu：含有子菜單的菜單項；
el-sub-menu：沒有子菜單的菜單項（最末級）；

結合菜單的屬性和展示效果，可以得到每個菜單項包括：菜單名稱、菜單圖標、菜單唯一標識、子菜單列表四個屬性。於是可得到菜單項結構定義如下：

/**
 * 菜單項
 */
export interface MenuItem {
  /**
   * 菜單名稱
   */
  title: string;
  /**
   * 菜單編碼（對應 el-menu-item / el-sub-menu 組件的唯一標識 index 欄位）
   */
  code: string;
  /**
   * 菜單的圖標
   */
  icon?: string;
  /**
   * 子菜單
   */
  children?: MenuItem[]
}

傳入 MenuItem 數組，使用該數組渲染出菜單。但有時候數據欄位不一定為上面結構定義的屬性名，如 菜單名稱 欄位，上面定義的屬性為 title，但實際開發過程中後端返回的是 name，此時欄位名不匹配。一種處理方式是前端開發獲取到後臺返回的數據後，遍歷構造上述結構，由於是樹形結構，遍歷起來麻煩。另一種方式是由用戶指定欄位的屬性名，分別指定菜單名稱、菜單編碼等分別對應用戶傳遞數據的什麼欄位。所以需要再定義一個結構，由用戶來配置欄位名稱。

1.2 菜單配置數據結構

首先定義菜單項欄位配置的結構：

/**
 * 菜單項欄位配置結構
 */
export interface MenuOptions {
  title?: string;
  code?: string;
  icon?: string;
  children?: string;
}

再定義菜單項結構預設欄位名：

/**
 * 菜單項預設欄位名稱
 */
export const defaultMenuOptions: MenuOptions = {
  title: 'title',
  code: 'code',
  icon: 'icon',
  children: 'children'
}

2 使用 tsx 實現封裝

2.1 tsx 基本結構

通常使用 tsx 封裝組件的結構如下：

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'yyg-menu',

  // 屬性定義
  props: {
  },

  setup (props, context) {
    console.log(props, context)

    return () => (
      <div>yyg-menu</div>
    )
  }
})

2.2 定義 prop

首先定義兩個屬性：菜單的數據、菜單數據的欄位名。

// 屬性定義
props: {
  data: {
    type: Array as PropType<MenuItem[]>,
    required: true
  },
  menuOptions: {
    type: Object as PropType<MenuOptions>,
    required: false,
    default: () => ({})
  }
},

除了上面定義的兩個屬性，el-menu 中的屬性我們也希望能夠暴露出去使用：

image-20220916165319870

但 el-menu 的屬性太多，一個個定義不太現實，在 tsx 中可以使用 context.attrs 來獲取。

context.attrs 會返回當前組件定義的屬性之外、用戶傳入的其他屬性，也就是返回沒有在 props 中定義的屬性。

2.3 遞歸實現組件

在 setup 中 遞歸 實現菜單的無限級渲染。封裝函數 renderMenu，該函數接收一個數組，遍曆數組：

  • 如果沒有子節點，則使用 el-menu-item 渲染
  • 如果有子節點，先使用 el-sub-menu 渲染，el-sub-menu 中的內容又繼續調用 renderMenu 函數繼續渲染。

整個組件實現如下 infinite-menu.tsx：

import { DefineComponent, defineComponent, PropType } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { defaultMenuOptions, MenuItem, MenuOptions } from './types'

export default defineComponent({
  name: 'yyg-menu-tsx',

  // 屬性定義
  props: {
    data: {
      type: Array as PropType<MenuItem[]>,
      required: true
    },
    menuOptions: {
      type: Object as PropType<MenuOptions>,
      required: false,
      default: () => ({})
    }
  },

  setup (props, context) {
    console.log(props, context)

    // 合併預設的欄位配置和用戶傳入的欄位配置
    const options = {
      ...defaultMenuOptions,
      ...props.menuOptions
    }

    // 渲染圖標
    const renderIcon = (icon?: string) => {
      if (!icon) {
        return null
      }
      const IconComp = (ElementPlusIconsVue as { [key: string]: DefineComponent })[icon]
      return (
        <el-icon>
          <IconComp/>
        </el-icon>
      )
    }

    // 遞歸渲染菜單
    const renderMenu = (list: any[]) => {
      return list.map(item => {
        // 如果沒有子菜單，使用 el-menu-item 渲染菜單項
        if (!item[options.children!] || !item[options.children!].length) {
          return (
            <el-menu-item index={item[options.code!]}>
              {renderIcon(item[options.icon!])}
              <span>{item[options.title!]}</span>
            </el-menu-item>
          )
        }

        // 有子菜單，使用 el-sub-menu 渲染子菜單
        // el-sub-menu 的插槽（title 和 default）
        const slots = {
          title: () => (
            <>
              {renderIcon(item[options.icon!])}
              <span>{item[options.title!]}</span>
            </>
          ),
          default: () => renderMenu(item[options.children!])
        }

        return <el-sub-menu index={item[options.code!]} v-slots={slots} />
      })
    }

    return () => (
      <el-menu {...context.attrs}>
        {renderMenu(props.data)}
      </el-menu>
    )
  }
})

3 使用 SFC 實現菜單封裝

SFC 即 Single File Component，可以理解為 .vue 文件編寫的組件。上面使用 tsx 可以很方便使用遞歸，模板的方式就不太方便使用遞歸了，需要使用兩個組件來實現。

3.1 封裝菜單項的渲染

infinite-menu-item.vue：

<template>
  <!-- 沒有子節點，使用 el-menu-item 渲染 -->
  <el-menu-item v-if="!item[menuOptions.children] || !item[menuOptions.children].length"
                :index="item[menuOptions.code]">
    <el-icon v-if="item[menuOptions.icon]">
      <Component :is="ElementPlusIconsVue[item[menuOptions.icon]]"/>
    </el-icon>
    <span>{{ item[menuOptions.title] }}</span>
  </el-menu-item>

  <!-- 有子節點，使用 el-sub-menu 渲染 -->
  <el-sub-menu v-else
               :index="item[menuOptions.code]">
    <template #title>
      <el-icon v-if="item[menuOptions.icon]">
        <Component :is="ElementPlusIconsVue[item[menuOptions.icon]]"/>
      </el-icon>
      <span>{{ item[menuOptions.title] }}</span>
    </template>
    <!-- 迴圈渲染 -->
    <infinite-menu-item v-for="sub in item[menuOptions.children]"
                        :key="sub[menuOptions.code]"
                        :item="sub"
                        :menu-options="menuOptions"/>
  </el-sub-menu>
</template>

<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
import { MenuOptions } from './types'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

defineProps({
  item: {
    type: Object,
    required: true
  },
  menuOptions: {
    type: Object as PropType<MenuOptions>,
    required: true
  }
})
</script>

<style scoped lang="scss">
</style>

3.2 封裝菜單組件

infinite-menu-sfc.vue

<template>
  <el-menu v-bind="$attrs">
    <infinite-menu-item v-for="(item, index) in data"
                        :key="index"
                        :item="item"
                        :menu-options="options"/>
  </el-menu>
</template>

<script lang="ts" setup>
import InfiniteMenuItem from './infinite-menu-item.vue'
import { defineProps, onMounted, PropType, ref } from 'vue'
import { defaultMenuOptions, MenuItem, MenuOptions } from './types'

const props = defineProps({
  data: {
    type: Array as PropType<MenuItem[]>,
    required: true
  },
  menuOptions: {
    type: Object as PropType<MenuOptions>,
    required: false,
    default: () => ({})
  }
})

const options = ref({})

onMounted(() => {
  options.value = {
    ...defaultMenuOptions,
    ...props.menuOptions
  }
})
</script>

<style scoped lang="scss">
</style>

4 測試組件

4.1 菜單測試數據

menu-mock-data.ts

export const mockData = [{
  title: '系統管理',
  id: 'sys',
  logo: 'Menu',
  children: [{
    title: '許可權管理',
    id: 'permission',
    logo: 'User',
    children: [
      { title: '角色管理', id: 'role', logo: 'User' },
      { title: '資源管理', id: 'res', logo: 'User' }
    ]
  }, {
    title: '字典管理', id: 'dict', logo: 'User'
  }]
}, {
  title: '營銷管理', id: '2', logo: 'Menu'
}, {
  title: '測試',
  id: 'test',
  logo: 'Menu',
  children: [{
    title: '測試-1',
    id: 'test-1',
    logo: 'Document',
    children: [{ title: '測試-1-1', id: 'test-1-1', logo: 'Document', children: [{ title: '測試-1-1-1', id: 'test-1-1-1', logo: 'Document' }]}, { title: '測試-1-2', id: 'test-1-2', logo: 'Document' }]
  }]
}]

4.2 測試頁面

<template>
  <div class="menu-demo">
    <div>
      <h3>tsx</h3>
      <yyg-infinite-menu-tsx
        :data="mockData"
        active-text-color="red"
        default-active="1"
        :menu-options="menuOptions"/>
    </div>

    <div>
      <h3>sfc</h3>
      <yyg-infinite-menu-sfc
        :data="mockData"
        active-text-color="red"
        default-active="1"
        :menu-options="menuOptions"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import YygInfiniteMenuTsx from '@/components/infinite-menu'
import YygInfiniteMenuSfc from '@/components/infinite-menu-sfc.vue'
import { mockData } from '@/views/data/menu-mock-data'

const menuOptions = { title: 'title', code: 'id', icon: 'logo' }
</script>

<style scoped lang="scss">
.menu-demo {
  display: flex;

  > div {
    width: 250px;
    margin-right: 30px;
  }
}
</style>

4.3 運行效果

image-20220916180635608

總結：

  1. 在之前的文章中有讀者問我為什麼要使用 tsx，從這個例子可以看出，如果控制流程複雜或有遞歸等操作時，tsx 會比 sfc 更容易實現；
  2. tsx 和 sfc 中動態組件的使用；
  3. tsx 中的 context.attrs 和 sfc 中的 v-bind="$attrs" 的使用。

感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，作者會持續與大家分享更多乾貨


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一招教你如何高效批量導入與更新數據
    摘要：如果你的數據量很大，想儘快完成任務執行，可否有其他方案？那一定不要錯過GaussDB(DWS)的MERGE INTO功能。 本文分享自華為雲社區《一招教你如何高效批量導入與更新數據》，作者： acydy。 當前GaussDB(DWS)提供了MERGE INTO功能。本篇文章介紹MERGE IN ...
  • ChunJun&OceanBase聯合方案首次發佈：構建一體化數據集成方案
    8月27日，ChunJun社區與OceanBase社區聯合組織的開源線下Meetup成功舉辦，會上重磅發佈了「OceanBase&ChunJun：構建一體化數據集成方案」。 這是OceanBase&ChunJun聯合解決方案的首次發佈，將針對分庫分表的實時數據集成、跨集群/租戶的數據集成、不同數據源 ...
  • 一步步搞懂MySQL元數據鎖（MDL）
    到底什麼是metadata lock？這個鎖等待是如何產生的？會帶來什麼影響？最後又如何來解決？今天我們挑6個常見問題給大家解答一下。 ...
  • 資料庫發展史2--數據倉庫
    ​ 回顧數據倉庫的發展歷程，大致可以將其分為幾個階段：萌芽探索到全企業集成時代、企業數據集成時代、混亂時代--"數據倉庫之父"間的論戰、理論模型確認時代以及數據倉庫產品百家爭鳴時代。 數據倉庫理論發展歷程 上世紀70年代，IBM的E.F.Codd等人提出關係型資料庫後，MIT的研究員提出單獨構建分析 ...
  • redis-cluster集群的搭建
    redis集群的搭建 redis集群的三種模式 主從複製 哨兵模式 cluster集群 redis-cluster集群的搭建（在一臺linux中搭建,三主三從） 下載安裝redis5.0.3 cd /opt 下載redis安裝包 wget http://download.redis.io/relea ...
  • IOS證書製作教程
    Appuploader可以輔助在Windows、linux或mac系統直接申請iOS證書p12，及上傳ipa到App Store，最方便在Windows開發上架沒有蘋果Mac電腦的開發者！配合本教程使用，可以快速掌握如何真機測試及上架！ 點擊蘋果證書 按鈕 點擊新增 ​ 輸入證書密碼，名稱 這個密碼 ...
  • 實現 div 元素內容超出可通過滾輪上下滑動從而使元素橫向滾動
    移動端中的元素內容超出時，對容器設置overflow-x: auto就可以通過手勢水平移動。但是 PC 端只能通過滑鼠滾輪上下滑動，而不能水平移動。 只需要給元素添加一個監聽滑鼠滾輪事件，上下滑動時修改其 scrollLeft 屬性值就可以實現。直接貼上代碼： <div class="horizon ...
  • Html飛機大戰(十五): 上線
    好家伙, 我的飛機大戰部署上線了 胖虎的飛機大戰 感興趣的可以去玩一下 （怕有人接受不了這個背景，我還貼心的準備切換背景按鈕，然而這並沒有什麼用） 現在，我們停下腳步，重新審視這個游戲 現在基本的框架都弄出來了，敵機，英雄，子彈，分數，生命 但是，這個“游戲“有個非常致命的問題， 他不好玩，（不好玩 ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類