首页 > 网络编程 > JavaScript > Vue3 Element-plus el-menu无限级菜单组件封装过程

Vue3 Element-plus el-menu无限级菜单组件封装过程

福牛 4月 26, 2023 23 0

对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装

-1
效果图

 一、定义数据

MenuData.ts

  1. export default [
  2.      {
  3.          id: “1”,
  4.          name: “第一级菜单”,
  5.          level: ‘1’,
  6.          child: [
  7.              {
  8.                  id: “11”,
  9.                  name: “第二级菜单”,
  10.                  level: ‘1-1’,
  11.                  child: [
  12.                      {
  13.                      id: “111”,
  14.                      name: “第三级菜单”,
  15.                      level: ‘1-1-1’,
  16.                      child: [
  17.                      {
  18.                      id: “1111”,
  19.                      name: “第四级菜单”,
  20.                      level: ‘1-1-1-1’,
  21.                      child: [
  22.                      {
  23.                      id: “11111”,
  24.                      name: “第五级菜单”,
  25.                      level: ‘1-1-1-1-1’,
  26.                      child: []
  27.                  }
  28.                      ]
  29.                      }
  30.                      ]
  31.                      }]
  32.              }
  33.          ]
  34.      },
  35.      {
  36.          id: “2”,
  37.          name: “第一级同级菜单”,
  38.          level: ‘2’,
  39.          child: []
  40.      }
  42. ]

二、封装组件

封装思想：

1.对本身组件进行循环使用，如果有子集使用本身组件 把child数据传给自己

2.如果没有子集 使用 el-menu-item

以下代码对setup( )函数和setup语法糖分别做了实现

setup语法糖

  1. <template>
  2.      <el-menu
  3.      :default-active=“defaultActive”
  4.      :unique-opened=“true”
  5.      class=“el-menu-vertical-demo”
  6.      >
  7.      <template v-for=“item in menu”>
  8.          <!– 如果有子集 –>
  9.          <template v-if=“item.child && item.child.length > 0″>
  10.          <el-sub-menu
  11.              :key=“item.id”
  12.              :index=“item.level”
  13.              :disabled=“item.meta?.disabled”
  14.              :popper-append-to-body=“false”
  15.          >
  16.              <template #title>
  17.              <i :class=“[item.meta?.icon]”></i>
  18.              <!– 添加空格 表示下级–>
  19.              <span> {{ generateSpaces(item.level) }} </span>
  20.              <span slot=“title”> {{ item.name }}</span>
  21.              </template>
  22.              <MenuTree
  23.              :menu=“item.child”
  24.              :defaultActive=“defaultActive”
  25.              @clickItem=“clickItemHandle”
  26.              />
  27.          </el-sub-menu>
  28.          </template>
  29.          <!– 如果没有子集 –>
  30.          <template v-else>
  31.          <el-menu-item
  32.              :key=“item.id”
  33.              :index=“item.level”
  34.              :disabled=“item.meta?.disabled”
  35.              :popper-append-to-body=“false”
  36.              @click=“clickItemHandle(item)”
  37.          >
  38.              <i :class=“[item.meta?.icon]”></i>
  39.              <!– 添加空格 表示下级–>
  40.              <span> {{ generateSpaces(item.level) }} </span>
  41.              <span slot=“title”>{{ item.name }}</span>
  42.          </el-menu-item>
  43.          </template>
  44.      </template>
  45.      </el-menu>
  46. </template>
  48. <script lang=“ts” name=“MenuTree” setup>
  49. // 把下面代码变成setup语法糖的形式
  50. import type { PropType } from “vue“;
  51. import type { MenuItem } from “@/types/lesson”;
  52. // type 为了方便写成这样 可以根据自己项目设定type
  53.      defineProps({
  54.      menu: {
  55.      type: Array as unknown as PropType<any[]>,
  56.      required: true,
  57.      default: () => [],
  58.      },
  59.      defaultActive: {
  60.      type: String as unknown as PropType<string>,
  61.      required: true,
  62.      default: [],
  63.      },
  64. });
  66. const emit = defineEmits([“update-active-path”, “clickItem”]);
  68. // 返回的空格字符串 用于显示菜单层级
  69. const generateSpaces = (level: string) => {
  70.      let str = “”;
  71.      level.split(“”) .filter((it) => it != “-“) .forEach(() => {
  72.          str += “　”;
  73.      });
  74.      return str;
  75. };
  77. // 点击当前菜单项
  78. const clickItemHandle = (item: MenuItem) => {
  79.      emit(“clickItem”, item);
  80. };
  81. </script>
  83. <style scoped lang=“less”>
  84. .el–menu {
  85.      width: 288px;
  86. }
  87. </style>

setup函数

  1. <template>
  2.      <el-menu :default-active=“defaultActive” :unique-opened=“true” class=“el-menu-vertical-demo” >
  3.      <template v-for=“item in menu”>
  4.          <template v-if=“item.child && item.child.length > 0″>
  5.              <el-sub-menu
  6.              :key=“item.id”
  7.              :index=“item.level”
  8.              :disabled=“item.meta?.disabled”
  9.              :popper-append-to-body=“false”
  10.              >
  11.              <template #title>
  12.                  <i :class=“[item.meta?.icon]”></i>
  13.                  <!– 添加空格 表示下级–>
  14.                  <span> {{ generateSpaces(item.level) }} </span>
  15.                  <span slot=“title”> {{ item.name }}</span>
  16.              </template>
  17.              <MenuTree :menu=“item.child” :defaultActive=“defaultActive” @clickItem=“clickItemHandle” />
  18.              </el-sub-menu>
  19.          </template>
  20.          <template v-else>
  21.              <el-menu-item
  22.              :key=“item.id”
  23.              :index=“item.level”
  24.              :disabled=“item.meta?.disabled”
  25.              :popper-append-to-body=“false”
  26.              @click=“clickItemHandle(item)”
  27.              >
  28.              <i :class=“[item.meta?.icon]”></i>
  29.              <!– 添加空格 表示下级–>
  30.              <span> {{ generateSpaces(item.level) }} </span>
  31.              <span slot=“title”>{{ item.name }}</span>
  32.              </el-menu-item>
  33.          </template>
  34.          </template>
  35.      </el-menu>
  36. </template>
  38. <script lang=“ts”>
  39. import { defineComponent, toRefs } from ‘vue’;
  40. import type { PropType } from ‘vue’
  41. import type {MenuItem} from ‘@/types/lesson’
  42. export default defineComponent({
  43.      name: ‘MenuTree’,
  44.      props: {
  45.      menu: {
  46.          type: Array as unknown as PropType<any[]>,
  47.          required: true,
  48.          default: () => [],
  49.      },
  50.      defaultActive: {
  51.          type: String as unknown as PropType<string>,
  52.          required: true,
  53.          default: ”,
  54.      },
  55.      },
  56.      emits: [‘update-active-path’,‘clickItem’],
  57.      setup(props, context) {
  58.      const { menu, defaultActive } = toRefs(props);
  60.      const generateSpaces = (level:string) => {
  61.          let str = ”
  62.          level.split(”).filter(it=>it!=‘-‘).forEach(() => {
  63.          str += ‘　’
  64.          })
  65.          return str
  66.      }
  68.      const clickItemHandle = (item:MenuItem) => {
  69.          context.emit(‘clickItem’, item)
  70.      }
  73.      return {
  74.          clickItemHandle,
  75.          menu,
  76.          defaultActive,
  77.          generateSpaces,
  78.      }
  79.      },
  80. });
  81. </script>
  83. <style scoped lang=“less”>
  84.      .el–menu {
  85.      width: 288px;
  86.      }
  87. </style>

type就不补充了 可根据自己项目定义，可临时改成any

三、使用组件

  1. <template>
  2.      <MenuTree
  3.          :menu=“menuList”
  4.          :defaultActive=“defaultActive”
  5.          @clickItem=“handleMenuClick”
  6.          :update-click=“handleMenuClick”
  7.          />
  8. </template>
  10. <script setup lang=“ts”>
  11. import MenuTree from “./components/MenuTree.vue”;
  12. import type {MenuItem} from ‘@/types/lesson’
  13. import menuData from ‘./MenuData’
  15. const defaultActive = ref<string>(”); // “1-1-1-1” 默认选中的数据
  16. const menuList = ref(menuData)
  18. const handleMenuClick = (item:MenuItem) => {
  19.      console.log(‘父组件’,item);
  20. };
  21. </script>

补充default-active变量，如果一开始想默认点开第一层的数据 就需要找规律啦

拿到所有的level，通过接口方式返给你 自己平铺拿到所有的level也好

例如数据格式:

  1. let arr = [ “1-1”,
  2.      “1-1-1”,
  3.      “1-1-1-1”,
  4.      “1-1-1-2”,
  5.      “1-1-1-3”,
  6.      “1-1-1-4”,
  7.      “1-1-1-5”,
  8.      “1-1-1-6”,
  9.      “1-1-2”,
  10.      “1-1-2-1″
  11. ]

想要的结果就是 最长且相同数字最多的元素 1-1-1-1

  1. arr.sort((a,b)=> b.split(‘-‘).length – a.split(‘-‘).length)[0]

使用split防止有些字符串是10、11 两位数字的

到此这篇关于Vue3 Element-plus el-menu无限级菜单组件封装的文章就介绍到这了,更多相关Vue3 Element-plus el-menu内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论