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'}])

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/290981.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Netty核心原理剖析与RPC实践6-10

Netty核心原理剖析与RPC实践6-10 06-粘包拆包问题&#xff1a;如何获取一个完整的网络包 本节课开始我们将学习 Netty 通信过程中的编解码技术。编解码技术这是实现网络通信的基础&#xff0c;让我们可以定义任何满足业务需求的应用层协议。在网络编程中&#xff0c;我们经常…

QT资源添加调用

添加资源文件&#xff0c;新建资源文件夹&#xff0c;命名resource&#xff0c;然后点下一步&#xff0c;点完成 资源&#xff0c;右键add Prefix 添加现有文件 展示的label图片切换 QLabel *led_show; #include "mainwindow.h" #include<QLabel> #include&l…

mysql 常见运算符

学习了mysql数据类型&#xff0c;接下来学习mysql常见运算符。 2&#xff0c;常见运算符介绍 运算符连接表达式中各个操作数&#xff0c;其作用是用来指明对操作数所进行的运算。运用运算符 可以更加灵活地使用表中的数据&#xff0c;常见的运算符类型有&#xff1a;算…

增强现实(AR)的开发工具

增强现实&#xff08;AR&#xff09;的开发工具涵盖了一系列的软件和平台&#xff0c;它们可以帮助开发者创造出能够将虚拟内容融入现实世界的应用程序。以下是一些在AR领域内广泛使用的开发工具。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎…

【最新版RabbitMQ3.13】Linux安装基于源码构建的RabbitMQ教程

前言 linux环境 安装方式有三种&#xff0c;我们这里使用源码安装 Linux下rpm、yum和源码三种安装方式简介 个人语雀首发教程&#xff1a;https://www.yuque.com/wzzz/java/kl2zn22b42svsc6b csdn地址: https://blog.csdn.net/u013625306/article/details/137151862 安装版本…

三菱Q系列PLC以太网TCP通讯FB块源码

三菱Q系列PLC的tcp通讯&#xff0c;客户端和服务器两个变量好用的FB块&#xff0c;调用块就可以实现通讯连接&#xff0c;不需要自己写程序&#xff0c;简单配置引脚就可以。该块还集成了断网&#xff0c;连接错误&#xff0c;发送接收数据错误报警等功能。具体功能见下面介绍.…

C语言最大公约数(辗转相除法)

输入两个整数&#xff0c;求他们的最大公约数&#xff1a; 如果我们不用辗转相除法的话&#xff0c;两个整数的最大公约数&#xff0c;我们就可以定义一个整数为两个整数中最小的那个数&#xff0c;然后两个整数一起除我们新定义的整数&#xff0c;如果都除尽了&#xff0c;这…

UE5数字孪生系列笔记(三)

C创建Pawn类玩家 创建一个GameMode蓝图用来加载我们自定义的游戏Mode新建一个Pawn的C&#xff0c;MyCharacter类作为玩家&#xff0c;新建一个相机组件与相机臂组件&#xff0c;box组件作为根组件 // Fill out your copyright notice in the Description page of Project Set…

备考ICA----Istio实验13---使用 Istio Ingress 暴露应用

备考ICA----Istio实验13—使用Istio Ingress TLS暴露应用 1. 环境部署 清理之前实验遗留,并重新部署httpbin服务进行测试 # 清理之前的环境 kubectl delete vs httpbin kubectl delete gw mygateway # 部署httpbin kubectl apply -f istio/samples/httpbin/httpbin.yaml 确认…

从vivo X Fold3看vivo“质”变

撰文 | 何玺 排版 | 叶媛 vivo的气质变了&#xff01;虽然依旧内敛、低调&#xff0c;但更自信、从容&#xff0c;气场也更强大。这是玺哥在本次vivo X Fold3系列新品发布会上的一个直观感受。 是什么改变了vivo的气质&#xff1f;产品&#xff1f;技术&#xff1f;又或是其他…

衰老抑制剂原知因起源金NMN热销,“海弗里克极限”将被打破?

美国著名生物学家列奥纳多 海弗里克 , 在 1961 年研究人类胎儿的细胞群体分裂次数时提出了著名的 " 海弗里克极限 " 理论。该理论认为 , 正常细胞分裂的周期是 2-3 年 , 分裂次数大概是 50 次 , 得出人类的极限寿命高达 150 岁。半个世纪后 , 世界上最长寿的人 , 打…

医院信管系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 1. 系统功能…

阿里云实时计算Flink的产品化思考与实践【下】

摘要&#xff1a;本文整理自阿里云高级产品专家黄鹏程和阿里云技术专家陈婧敏在 FFA 2023 平台建设专场中的分享。内容主要为以下五部分&#xff1a; 阿里云实时计算 Flink 产品化思考 产品化实践 SQL 产品化思考及实践 展望 接上篇&#xff1a;阿里云实时计算Flink的产品…

SD 修复 Midjourney 有瑕疵照片

Midjourney V6 生成的照片在质感上有了一个巨大的提升。下面4张图就是 Midjourney V6 生成的。 如果仔细观察人物和老虎的面部&#xff0c;细节真的很丰富。 但仔细观察上面四张图的手部细节&#xff0c;就会发现至少有两只手是有问题的。这也是目前所有 AI 绘图工具面临的问题…

DARTS-PT: RETHINKING ARCHITECTURE SELECTION IN DIFFERENTIABLE NAS

Rethinking Architecture Selection in Differentiable NAS 论文链接&#xff1a;https://arxiv.org/abs/2108.04392v1 项目链接&#xff1a;https://github.com/ruocwang/darts-pt ABSTRACT 可微架构搜索(Differentiable Neural Architecture Search, NAS)是目前最流行的网…

鸿蒙OS开发实例:【应用级别文件浏览器】

介绍 HarmonyOS的沙盒机制完全屏蔽了应用对手机公共存储空间的访问&#xff0c;安全性提高已不言而喻。 本篇文章的主要目的是为了能通过一个简单工具&#xff0c;可视化的让一个新手能相对轻松的学习文件&数据存储。HarmonyOS 应用开发工具DevEco Studio也没有提供读取存…

新能源汽车充电桩常见类型及充电桩站场的智能监管方案设计

随着新能源汽车市场的迅猛发展&#xff0c;充电桩作为支持其运行的基础设施&#xff0c;也呈现出多样化的类型。这些充电桩不仅在外形和功能上存在差异&#xff0c;更在充电速度、充电方式以及使用场景等方面展现出独特的优势。 一、充电桩类型及区别 1、慢充桩&#xff08;交…

GenMedicalEval:医疗大语言模型综合评测框架

推荐一个开源的医疗大语言模型综合评价框架。 项目链接 https://github.com/MediaBrain-SJTU/GenMedicalEval 项目简介 我们提出了一个医疗大语言模型的综合评测框架&#xff0c;具有以下三大特点&#xff1a; 1.大规模综合性能评测&#xff1a;GenMedicalEval构建了一个覆盖…

stm32定时器中断函数回调函数

方式一&#xff1a;stm32定时器中断可以直接在硬件中断函数TIM3_IRQHandler执行。 在HAL库中可以注册回调函数&#xff0c;在定时器中断发生时调用注册的函数&#xff0c;这样可以统一接口&#xff0c;大大提高函数可读性&#xff0c;和硬件解耦提高程序可移植性。 使用过程如…

uniapp实现的数据选择器,支持H5、微信小程序

采用uniapp-vue3实现的数据选择器&#xff0c;支持H5、微信小程序&#xff08;其他小程序未测试过&#xff0c;可自行尝试&#xff09; 支持本地自定义过滤、远程接口过滤&#xff0c;为了避免弹窗面板超出边界的情况&#xff0c;自动计算弹窗面板安置的位置&#xff08;在微信…