当前位置: 首页 > 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…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...