当前位置: 首页 > news >正文

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导航菜单

1. 导航外层布局 AsideView.vue <template><el-menu:default-active"defaultActive"class"my-menu":collapse"isCollapse":collapse-transition"false"open"handleOpen"close"handleClose"><menu…...

字符串的函数

头文件 # include <string.h> 五大函数&#xff1a; strlen()、strcpy、strcat()、strcmp()、strstr() 用法&#xff1a; strlen()&#xff1a;计算字符串长度&#xff0c;但不计\0这个字符 #include <string.h> int main() {char arr[] "abcdef"…...

Linux安装redis(基于CentOS系统,Ubuntu也可参考)

前言&#xff1a;本文内容为实操记录&#xff0c;仅供参考&#xff01; 一、下载并解压Redis 1、执行下面的命令下载redis&#xff1a;wget https://download.redis.io/releases/redis-6.2.6.tar.gz 2、解压redis&#xff1a;tar xzf redis-6.2.6.tar.gz 3、移动redis目录&a…...

ChatGPT引领量化交易革命:AI在金融创新的浪潮中崭露头角

随着科技的飞速发展,金融领域正迎来一场前所未有的创新浪潮。在这场变革中,ChatGPT凭借其卓越的自然语言处理能力和深度学习能力,正引领量化交易进入新时代。 量化交易,作为现代金融领域的一种重要交易方式,依赖于复杂的数学模型和大量的历史数据来制定交易策略。然而,传…...

无忧微服务:如何实现大流量下新版本的发布自由

作者&#xff1a;项良、十眠 微服务上云门槛降低&#xff0c;用好微服务才是关键 据调研数据显示&#xff0c;约 70% 的生产故障是由变更引起的。在阿里云上的企业应用如茶百道、极氪汽车和来电等&#xff0c;他们是如何解决变更引起的稳定性风险&#xff0c;实现了在白天高流…...

Halcon3D表面平面度检测-平面差值法

//倾斜平面矫正 https://blog.csdn.net/m0_51559565/article/details/137146179 //平面度和平面缺陷检测&#xff0c;平面矫正法 https://blog.csdn.net/m0_51559565/article/details/137163729前言 通常我们对表面平面度进行检测时&#xff0c;通常使用2种方式。1&#xff1a…...

golang 在多线程中避免 CPU 指令重排

发布日期&#xff1a;2024-03-26 16:29:39 起因 golang 的发明初衷便是多线程&#xff0c;是一门专门用于多线程高并发的编程语言。其独创的 GMP 模型在多线程的开发上提供了很大的便利。 现代计算机基本上都是多核 CPU 的结构。CPU 在进行指令运行的时候&#xff0c;为了提高…...

自动化更新包文件--shell脚本

自动化更新包文件--shell脚本 背景手动更包自动化更包 背景 作为一名实施工程师&#xff0c;当然也协助做些测试的工作&#xff0c;当产品功能开发后&#xff0c;研发会将本次迭代涉及的前后端包文件提供过来。有时会因为一些原因研发没法现场开发&#xff0c;那就需要我们配合…...

Vue element-plus 导航栏 [el-menu]

导航栏 [el-menu] Menu 菜单 | Element Plus el-menu有很多属性和子标签&#xff0c;为网站提供导航功能的菜单。 常用标签&#xff1a; 它里面有两个子标签。el-menu-item&#xff0c;它其实就是el-menu每一个里面的item&#xff0c;item就是真实匹配到路由的每个栏目&#…...

数据结构——数组

数组定义&#xff1a; 在计算机科学中&#xff0c;数组是由一组元素&#xff08;值或变量&#xff09;组成的数据结构&#xff0c;每个元素有至少一个索引或键来标识。 因为数组内的元素是连续存储的&#xff0c;所以数组中元素的地址&#xff0c;可以通过其索引计算出来。 性…...

python asyncio websockets server

python websocket server在收到接受消息处理完后会默认关闭连接。需要在msg_handler里面加个while true就能一直保持连接了。 start_server websockets.serve(msg_handler, "0.0.0.0", 29967) asyncio.get_event_loop().run_until_complete(start_server) asyncio.…...

视频素材免费网站有哪些?8个视频素材库网站下载推荐

在视频创作领域&#xff0c;选择正确的高质量无水印素材网站能够极大地丰富您的作品&#xff0c;让每一帧都鲜活起来。下面&#xff0c;我们继续为您介绍更多优质的视频素材网站&#xff0c;每一个都是您创作旅程中的宝贵资源。 1. 蛙学府&#xff08;中国&#xff09; 集合了…...

ChatGPT与传统搜索引擎的区别:智能对话与关键词匹配的差异

引言 随着互联网的快速发展&#xff0c;信息的获取变得比以往任何时候都更加便捷。在数字化时代&#xff0c;人们对于获取准确、及时信息的需求愈发迫切。传统搜索引擎通过关键词匹配的方式为用户提供了大量的信息&#xff0c;然而&#xff0c;这种机械式的检索方式有时候并不…...

xargs后调用bash自定义函数(写该函数文本到脚本, 并引导PATH)

xargs后调用bash自定义函数 需要3步骤,如下 function to_markdown_href_func() { fp$1 #echo $fpecho -e "\n[${fp}](${PREFIX}/${fp})" }BIN/tmp/bin/ F$BIN/to_markdown_href_func.sh mkdir -p $BIN 获得函数to_markdown_href_func的文本 ,写文本到 /tmp/bin/to_ma…...

学术论文写作新利器:ChatGPT技巧详解

ChatGPT无限次数:点击直达 学术论文写作新利器&#xff1a;ChatGPT技巧详解 在如今信息爆炸的时代&#xff0c;学术论文写作变得愈发重要且具有挑战性。随着人工智能技术的不断发展&#xff0c;ChatGPT作为一种强大的写作辅助工具&#xff0c;为学术论文创作者提供了全新的可能…...

Spring整合JDBC

1、引入依赖 <properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><depen…...

详解Qt中的布局管理器

Qt中的布局管理是用于组织用户界面中控件&#xff08;如按钮、文本框、标签等&#xff09;位置和尺寸调整的一种机制。说白了就是创建了一种规则&#xff0c;随着窗口变化其中的控件大小位置跟着变化。Qt提供了多种布局管理器&#xff0c;每种都有其特定用途和特点。以下是对Qt…...

MyBatis 参数重复打印的bug

现象 最近有个需求&#xff0c;需要在mybatis对数据库进行写入操作的时候&#xff0c;根据条件对对象中的某个值进行置空&#xff0c;然后再进行写入&#xff0c;这样数据库中的值就会为空了。 根据网上查看的资料&#xff0c;选择在 StatementHandler 类执行 update 的时候进…...

ES6学习之路:迭代器Iterator和生成器Generator

迭代器 一、知识背景 什么是迭代器 迭代器就是在一个数据集合中不断取出数据的过程迭代和遍历的区别 遍历是把所有数据都取出迭代器注重的是依次取出数据&#xff0c;它不会在意有多少数据&#xff0c;也不会保证能够取出多少或者能够把数据都取完。比如斐波那契额数列&#…...

如何使用 DynamiCrafter Interp Loop 无缝连接两张照片

DynamiCrafter Interp Loop 是一个基于 AI 的工具&#xff0c;可以用来无缝连接两张照片。它使用深度学习技术来生成中间帧&#xff0c;从而使两张照片之间的过渡更加自然流畅。 使用步骤 访问 DynamiCrafter Interp Loop 网站&#xff1a;https://huggingface.co/spaces/Dou…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...