递归竖栏菜单简单思路

自己的项目要写一个竖栏菜单,所以记录一下思路吧,先粗糙的实现一把,有机会再把细节修饰一下

功能上就是无论这个菜单有多少层级,都能显示出来,另外,需要带图标,基于element-plus写成,当这个菜单栏点开的时候最好整个页面的高度不要有变化,最后整成了个小草稿

MyMenu.vue
<template><!-- 自己写的竖栏菜单组件 --><!-- <el-menu style="height: 100%;width:100%"> --><el-scrollbar max-height=100%><el-menu style="width: 100%;border: 0;" unique-opened :default-active="props.defaultIndex" active-text-color="#ffd04b"background-color="#545c64" text-color="#fff"><MenuTree :menu-data="props.data"></MenuTree></el-menu></el-scrollbar>
</template>
<script lang="ts" setup>
import MenuTree from "./MenuTree.vue"
const props=defineProps<{data:Array<any>,defaultIndex:string}>()
</script>

里面有个递归组件

MenuTree.vue
<template><!-- 递归组件 --><!-- 为了创建无限菜单而使用 --><template v-for="value in props.menuData"><!-- 没有children就是一个单标签 --><el-menu-item v-if="!value.children" :index="value.index"><template v-if="value.icon"><component :is="value.icon" style="width: 1rem;"></component></template>{{ value.title }}</el-menu-item><!-- 多标签的情况 --><el-sub-menu v-else :index="value.index"><template #title><template v-if="value.icon"><component :is="value.icon" style="width: 1rem;"></component></template> <span>{{ value.title }}</span></template><MenuTree :menuData="value.children"></MenuTree></el-sub-menu></template>
</template>
<script setup lang="ts">
import MenuTree from "../Page1/MenuTree.vue"
const props=defineProps<{menuData:Array<any>}>()
</script>

最后写个参数挂载一下,我这边用的icon是element-plus组件自带的

<template><el-container style="height: 100vh;"><el-header style="padding: 0;height: 5rem;"><div style="height: 100%;background-color:pink"><span>welcome to page1</span><br /><span>该页面用来写一个竖版menu</span></div></el-header><el-container style="height: calc(100vh - 5rem);"><el-aside width="15%" style="background-color:lightblue;"><MyMenu :data="menuData" :default-index="defaultIndex"/></el-aside><el-main style="background-color:rgb(246, 199, 11);"><component :is="iconStr" style="width: 1rem;"></component></el-main></el-container></el-container>
</template>
<script setup lang="ts">
import {ref} from "vue"
import { Search,Select,Close,User } from '@element-plus/icons-vue';
import MyMenu from './MyMenu.vue';
let menuData = [{title: "睡觉",index: "0",icon: Select},{title: "游戏",index: "1",icon: Search,children: [{title: "上古卷轴",index: "1-1",children: [{title: "上古卷轴匕首雨",index: "1-1-1",},{title: "上古卷轴天际",index: "1-1-2",icon: Select}]},{title: "辐射",index: "1-2",children: [{title: "龙万德",index: "1-2-1"},{title: "辐射新维加斯",index: "1-2-2"}]}]},{title: "美食",index: "2",icon: Close,children: [{title: "淮扬菜",index: "2-1",children: [{title: "红烧狮子头",index: "2-1-1"},{title: "猪头肉",index: "2-1-2"},]},{title: "川菜",index: "2-2",children: [{title: "四川泡菜",index: "2-2-1"},{title: "水煮鱼",index: "2-2-2"},{title: "开水白菜",index: "2-2-3"},]},{title: "粤菜",index: "2-3",children: [{title: "白切鸡",index: "2-3-1"},{title: "顺德鱼生",index: "2-3-2"},{title: "猪肚鸡",index: "2-3-3"},]}]},{title: "编程",index: "3",icon: User,children: [{title: "golang",index: "3-1",children: [{title: "云原生",index: "3-1-1"},{title: "gin",index: "3-1-2"}]},{title: "js",index: "3-2"},{title: "python",index: "3-3"}]}
]
// 默认index值
let defaultIndex = ref("0")
</script>

主要过程就是写了一个递归的菜单栏,然后用el-scrollbar包装了一下,以免这个菜单展开的时候把盒子高度撑开。

细节上难看了一点,此外我觉得整个菜单的高度应该和传入数组的最大深度相关,得把这个el-scrollbar组件换掉才行,先写着,有时间完善。

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

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

相关文章

ConcurrentHashMap底层具体实现以及实现原理

问题描述 ConcurrentHashMap 底层具体实现以及实现原理 分析维度&#xff1a; 1. ConcurrentHashMap的整体架构 2. ConcurrentHashMap的基本功能 3. ConcurrentHashMap在性能方面的优化 解决方案&#xff1a; ConcurrentHashMap 的整体架构 如图所示&#xff0c;这个是 Concu…

清风数学建模——层次分析法

层次分析法 文章目录 层次分析法评价类问题可以用打分来解决1.通过查阅资料选定指标2.画出权重表格并填写2.1.判断矩阵一致矩阵2.3一致性检验的步骤先算一致性指标CI根据表格查找n对应的RI&#xff08;平均随机一致性指标&#xff09;&#xff0c;表格一般会在题目中给出计算一…

3 PostGIS基础查询

PostGIS 基础查询 数据库维护 ps aux | grep postgrespsql 使用命令登录数据库psql -U postgres -d testdb -h localhost -p 5432postgres用户名&#xff0c;testdb数据库名称&#xff0c;localhost ip地址&#xff0c;可以省略&#xff0c;5432端口&#xff0c;可以省略。 …

【iOS】—— UIKit相关问题

文章目录 UIKit常用的UIKit组件懒加载的优势 CALayer和UIView区别关系 UITableViewUITableView遵循的两个delegate以及必须实现的方法上述四个必须实现方法执行顺序其他方法的执行顺序&#xff1a; UICollectionView和UITableView的区别UICollectionViewFlowLayout和UICollecti…

uniapp scroll-view显示滚动条

在style中添加样式&#xff1a; ::v-deep ::-webkit-scrollbar {/* 滚动条整体样式 */display: block;width: 10rpx !important;height: 10rpx !important;-webkit-appearance: auto !important;background: transparent;overflow: auto !important;}::v-deep ::-webkit-scroll…

oracle rman不能自动删除归档日志备份解决

发现在日常备份中&#xff0c;rman无法将过期的归档日志备份删除&#xff0c;查相关资料&#xff0c; delete noprompt backup completed before sysdate-2; 可通过该语句将所有备份记录删除&#xff0c;包括归档日志备份。 整理的脚本如下&#xff1a; 10 20 * * * su - or…

【Java】详解volatile和synchronized关键字

volatile和synchronized都是Java中用于控制并发的关键字&#xff0c;但是它们的使用场景和原理是不同的。 volatile关键字&#xff1a; 特点&#xff1a;volatile关键字主要有两个特性&#xff1a;保证变量的可见性和防止指令重排。当一个共享变量被volatile修饰时&#xff0c…

大数据Flink(五十一):Flink的引入和Flink的简介

文章目录 Flink的引入和Flink的简介 一、Flink的引入 1、第1代——Hadoop MapReduce

CentOS 8 服务器安装 MySQL 报错:no match mysql-community-server

参考 MySQL 官方文档&#xff1a; Re: No match for argument: mysql-community-serverMySQL yum 安装文档 报错如下&#xff1a; 1.No match for argument: mysql-community-server 2.Error: Unable to find a match: mysql-community-server上面的错误都提示找不到 mysql-…

RK809 电源管理芯片配置3-RK3568

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言RK809 芯片概述认识DCDC和LDORK809的引脚RK809 的功能电源管理的概念配置内核驱动电源域IO 电源域配置方法前言 前面提到编译的时候需要正确配置电源,RK3568的电源管理芯片是RK809,下面就来…

MyBatis 核心组件 —— Configuration

概述 Mybatis 的核心组件如下所示&#xff1a; Configuration&#xff1a;用于描述 MyBatis 的主配置信息&#xff0c;其他组件需要获取配置信息时&#xff0c;直接通过 Configuration 对象获取。除此之外&#xff0c;MyBatis 在应用启动时&#xff0c;将 Mapper 配置信息、类…

精选算法题(4)——字符串比较

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 题目描述&#xff1a; 好久没做题目了&#xff0c;近期刷抖音碰到一个题目&#xff0c;乍一看不是很难&#xff0c;但是手生了&a…

HTTP——HTTP报文内的HTTP信息

HTTP 通信过程包括从客户端发往服务器端的请求及从服务器端返回客户端的响应。本章就让我们来了解一下请求和响应是怎样运作的。 HTTP 一、HTTP报文二、请求报文及响应报文的结构三、编码提升传输速率1、报文主体和实体主题的差异2、压缩传输的内容编码3、分割发送的分块传输编…

HCIP——前期综合实验

前期综合实验 一、实验拓扑二、实验要求三、实验思路四、实验步骤1、配置接口IP地址2、交换机配置划分vlan10以及vlan203、总部分部&#xff0c;骨干网配置OSPF分部总部骨干网 4、配置BGP建立邻居关系总部骨干网分部 5、发布用户网段6、将下一跳改为本地7、允许AS重复8、重发布…

【Linux】 UDP网络套接字编程

&#x1f34e;作者&#xff1a;阿润菜菜 &#x1f4d6;专栏&#xff1a;Linux系统网络编程 文章目录 一、网络通信的本质&#xff08;port标识的进程间通信&#xff09;二、传输层协议UDP/TCP认识传输层协议UDP/TCP网络字节序问题&#xff08;规定大端&#xff09; 三、socket编…

前端面试题-react

1 React 中 keys 的作⽤是什么&#xff1f; Keys 是 React ⽤于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识在开发过程中&#xff0c;我们需要保证某个元素的 key 在其同级元素中具有唯⼀性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建…

第十三章 利用PCA简化数据

文章目录 第十三章 利用PCA简化数据13.1降维技术13.2PCA13.2.1移动坐标轴 13.2.2在NumPy中实现PCA13.3利用PCA对半导体制造数据降维 第十三章 利用PCA简化数据 PCA&#xff08;Principal Component Analysis&#xff0c;主成分分析&#xff09;是一种常用的降维技术&#xff0…

剑指offer41.数据流中的中位数

我一开始的想法是既然要找中位数&#xff0c;那肯定要排序&#xff0c;而且这个数据结构肯定要能动态的添加数据的&#xff0c;肯定不能用数组&#xff0c;于是我想到了用优先队列&#xff0c;它自己会排序都不用我写&#xff0c;所以addNum方法直接调用就可以&#xff0c;但是…

MAC电脑设置charles,连接手机的步骤说明(个人实际操作)

目录 一、charles web端设置 1. 安装charles之后&#xff0c;先安装证书 2. 设置 Proxy-Proxy Settings 3. 设置 SSL Proxying 二、手机的设置 1. 安卓 2. ios 资料获取方法 一、charles web端设置 1. 安装charles之后&#xff0c;先安装证书 Help-SSL Proxying-Inst…

sql group by 加条件

在SQL中&#xff0c;可以在GROUP BY子句中加入条件&#xff0c;以进一步过滤结果。你可以使用HAVING子句来添加条件。HAVING子句的使用方式类似于WHERE子句&#xff0c;但不同的是&#xff0c;它用于对GROUP BY子句生成的分组进行过滤。 以下是一个示例&#xff0c;演示如何在…