快捷導(dǎo)航

vue3封裝Element導(dǎo)航菜單的實(shí)例代碼

更新時(shí)間：2024年03月30日 09:58:59 作者：永不滿足的求知者

這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實(shí)例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

效果如下所示：

請(qǐng)?zhí)砑訄D片描述

1. 導(dǎo)航外層布局 AsideView.vue

<template>
  <el-menu
    :default-active="defaultActive"
    class="my-menu"
    :collapse="isCollapse"
    :collapse-transition="false"
    @open="handleOpen"
    @close="handleClose"
  >
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>
<script lang="ts" setup>
import { useRoute } from "vue-router";
import MenuItem from "./components/MenuItem.vue";
const collapseStore = useCollapseStore();
const isCollapse = computed(() => collapseStore.collapse);
const store = useMenuStore();
const menuList = store.menuList;
const flattenMenuList = store.flattenMenuList();
const defaultActive = ref("");
onMounted(() => {
  const route = useRoute();
  watch(
    () => route.fullPath,
    (newPath, oldPath) => {
      getDefaultActive(newPath);
    },
    {
      immediate: true,
    }
  );
});
const getDefaultActive = (path) => {
  const currentMenu = flattenMenuList.find((item) => item.path === path);
  if (currentMenu) {
    defaultActive.value = currentMenu.id;
  }
  console.log("defaultActive", defaultActive.value);
};
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style lang="scss">
.icon-collapse {
  cursor: pointer;
  width: 64px;
  height: 30px;
  margin: 0 auto;
}
.my-menu {
  background-color: #545c64;
  border-right: none;
  color: #fff;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-menu-item,
.el-sub-menu__title {
  background-color: #545c64;
  color: #fff;
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background: rgb(62, 64, 74);
}
.el-menu-item.is-active,
.el-sub-menu__title.is-active {
  background: rgb(62, 64, 74);
}
/* 滾動(dòng)條 */
::-webkit-scrollbar {
  /*滾動(dòng)條整體樣式*/
  width: 7px; /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
  height: 7px;
  &-thumb {
    /*滾動(dòng)條里面小方塊*/
    border-radius: 7px;
    background-color: #d0d0d0;
    &:hover {
      /*滾動(dòng)條里面小方塊*/
      background-color: #b7b7b7;
    }
  }
  &-track {
    /*滾動(dòng)條里面軌道*/
    border-radius: 7px;
    background-color: #fff;
  }
}
</style>

2. 單個(gè)導(dǎo)航菜單封裝 MenuItem.vue

<template>
  <template v-for="item in menuList" :key="item.id">
    <el-sub-menu
      :index="item.id"
      v-if="item.children && item.children.length > 0"
    >
      <template #title>
        <el-icon :size="30">
          <component class="fold-menu" :is="item.icon"></component>
        </el-icon>
        <span>{{ item.name }}</span>
      </template>
      <menu-item :menuList="item.children"></menu-item>
    </el-sub-menu>
    <el-menu-item :index="item.id" v-else @click="handleJump(item)">
      <el-icon :size="30">
        <component class="fold-menu" :is="item.icon"></component>
      </el-icon>
      <template #title>{{ item.name }}</template>
    </el-menu-item>
  </template>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import type { MenuInfo } from "~/types/menu";
const router = useRouter();
const props = defineProps({
  menuList: {
    type: Array<MenuInfo>,
  },
});
const handleJump = (item: MenuInfo) => {
  if (item.path) {
    router.push(item.path);
  }
};
</script>
<style lang="scss" scoped></style>

3. 控制導(dǎo)航收縮 stores/collapse.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useCollapseStore = defineStore('collapse', () => {
  const collapse = ref(false)
  const changeCollapse = function changeCollapse() {
    collapse.value = !collapse.value
  }
  return { collapse, changeCollapse }
})

4. 菜單數(shù)據(jù)格式示例

  const menuList = ref<MenuInfo[]>([
    {
      id: '1',
      name: '首頁(yè)',
      path: '/',
      icon: 'HomeFilled',
    },
    {
      id: '2',
      name: '用戶管理',
      path: '/user-manage',
      icon: 'UserFilled',
    },
    {
      id: '3',
      name: '權(quán)限管理',
      path: '/permission',
      icon: 'Lock',
    },
    {
      id: '4',
      name: '商品管理',
      path: '/product',
      icon: 'ShoppingBag',
      children: [
        {
          id: '4-1',
          name: '商品列表',
          path: '/product/list',
          icon: 'ShoppingBag'
        }
      ]
    },
    {
      id: '5',
      name: '訂單管理',
      path: '/order',
      icon: 'Document',
      children: [
        {
          id: '5-1',
          name: '訂單列表',
          path: '/order/list',
          icon: 'Document'
        }
      ]
    },
    {
      id: '6',
      name: '數(shù)據(jù)統(tǒng)計(jì)',
      path: '/data',
      icon: 'DataAnalysis'
    },
    {
      id: '7',
      name: '系統(tǒng)設(shè)置',
      path: '/system',
      icon: 'Setting'
    },
    {
      id: '8',
      name: '其他',
      path: '/other',
      icon: 'Document'
    }
  ])

到此這篇關(guān)于vue3封裝Element導(dǎo)航菜單的文章就介紹到這了,更多相關(guān)vue3封裝Element導(dǎo)航菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: