vue3封装Element导航菜单的实例代码

2024-04-18 0 783

效果如下所示:

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导航菜单内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • vue3+ElementPlus封装函数式弹窗组件详解
  • Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
  • Vue3+ElementPlus表单组件的封装实例
  • Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
  • Vue使用element-ui实现菜单导航
  • ant design vue导航菜单与路由配置操作
  • Vue实现导航栏菜单
  • vue二级菜单导航点击选中事件的方法
  • Vue-路由导航菜单栏的高亮设置方法

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript vue3封装Element导航菜单的实例代码 https://www.u-9.cn/biancheng/javascript/186774.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务