vue3封装Element导航菜单的实例代码,
3672Js.Com2024-04-11 02:22 来源:未知 阅读:2912 关注度3
vue3封装Element导航菜单的实例代码,
效果如下所示:
1. 导航外层布局 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); } /* 滚动条 */ ::-webkit-scrollbar { /*滚动条整体样式*/ width: 7px; /*高宽分别对应横竖滚动条的尺寸*/ height: 7px; &-thumb { /*滚动条里面小方块*/ border-radius: 7px; background-color: #d0d0d0; &:hover { /*滚动条里面小方块*/ background-color: #b7b7b7; } } &-track { /*滚动条里面轨道*/ border-radius: 7px; background-color: #fff; } } </style>
2. 单个导航菜单封装 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. 控制导航收缩 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. 菜单数据格式示例
const menuList = ref<MenuInfo[]>([ { id: '1', name: '首页', path: '/', icon: 'HomeFilled', }, { id: '2', name: '用户管理', path: '/user-manage', icon: 'UserFilled', }, { id: '3', name: '权限管理', 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: '数据统计', path: '/data', icon: 'DataAnalysis' }, { id: '7', name: '系统设置', path: '/system', icon: 'Setting' }, { id: '8', name: '其他', path: '/other', icon: 'Document' } ])
到此这篇关于vue3封装Element导航菜单的文章就介绍到这了,更多相关vue3封装Element导航菜单内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程!
您可能感兴趣的文章:- vue3+ElementPlus封装函数式弹窗组件详解
- Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
- Vue3+ElementPlus 表单组件的封装实例
- Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
- Vue使用element-ui实现菜单导航
- ant design vue导航菜单与路由配置操作
- Vue实现导航栏菜单
- vue二级菜单导航点击选中事件的方法
- Vue-路由导航菜单栏的高亮设置方法
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭