踩坑实录(Fourth Day)
今天开工了,其实还沉浸在过年放假的喜悦中……今天在自己写 Vue3 的项目,虽说是跟着 B 站在敲,但是依旧是踩了一些个坑,就离谱……照着敲都能踩到坑,我也是醉了……
此为第四篇(2024 年 02 月 18 日)
问题一
问题背景:在使用 Vue3 的 UI 组件库 Element Plus 的菜单折叠时,菜单折叠了,但是菜单的标题和右边的箭头并没有折叠。
问题描述:算了不描述了,直接上代码吧……
代码片段
<!-- 父组件 -->
<el-menu background-color="#001529" text-color="white" :default-active="$route.path":collapse="settingStore.isCollapse"><Menu :menu-list="routerStore.menuRoutes"></Menu>
</el-menu>
<!-- 子组件 -->
<template><div><template v-for="item in menuList" :key="item.path"><template v-if="!item.children"><el-menu-item v-if="!item.meta.hidden" :index="item.path" @click="goRoute"><el-icon><component :is="item.meta.icon"></component></el-icon><template #title><span>{{ item.meta.title }}</span></template></el-menu-item></template><template v-if="item.children && item.children.length === 1"><el-menu-item v-if="!item.meta.hidden" :index="item.children[0].path" @click="goRoute"><el-icon><component :is="item.children[0].meta.icon"></component></el-icon><template #title><span>{{ item.children[0].meta.title }}</span></template></el-menu-item></template><el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path"><template #title><el-icon><component :is="item.meta.icon"></component></el-icon><span>{{ item.meta.title }}</span></template><Menu :menu-list="item.children"></Menu></el-sub-menu></template></div>
</template>
效果截图

在这里我们看到,isCollapse 已经是 true (折叠状态)了,但是他的文字和箭头并没有隐藏。
-
分析过程
- 这里看了一下官方的文档,发现 el-sub-menu 里面的默认插槽直接是 SubMenu / Menu-Item / Menu-Item-Group 这几种,但是因为我封装成为了组件,所以在外层多了一个 div ,去掉外层这个 div 是可以正常显示的。

- 但是想了想,我们是不是可以使用样式穿透,手动将这两个内容设置为 display: none; 呢?于是我试了一下,是可以的。
所以这里我给出两个方案:
-
去掉子组件最外层的 div ,让 el-menu-item 直接暴露在 el-sub-menu 下。
-
使用样式穿透
::v-deep .el-menu--collapse .el-sub-menu__title span {display: none;
}
::v-deep .el-menu--collapse .el-sub-menu__icon-arrow {display: none;
}
以上两种方案都可以解决这个问题,至于还有没有其他方案,我就不得而知了,大家有兴趣的可以研究一下,发在评论区我们一起讨论。
声明:
作者只记录自己在公司踩过的坑,以及提供自己的解决思路,如果有误请联系作者进行修改,不接受以任何形式的诋毁谩骂。如果有更好的方案也可以联系作者进行讨论,互相学习。
如需转载请注明文章来源。
相关文章:
踩坑实录(Fourth Day)
今天开工了,其实还沉浸在过年放假的喜悦中……今天在自己写 Vue3 的项目,虽说是跟着 B 站在敲,但是依旧是踩了一些个坑,就离谱……照着敲都能踩到坑,我也是醉了…… 此为第四篇(2024 年 02 月 18 日&#x…...
【python】网络爬虫与信息提取--requests库
导学 当一个软件想获得数据,那么我们只有把网站当成api就可以 requests库:自动爬取HTML页面,自动网络请求提交 robots协议:网络爬虫排除标准(网络爬虫的规则) beautiful soup库:解析HTML页面 工具&…...
洛谷 P8627 [蓝桥杯 2015 省 A] 饮料换购
参考代码and代码解读 #include <bits/stdc.h> using namespace std; int main() { int n; scanf("%d", &n); int dr;//drdrink; dr n;//把drink赋值于n; while (n > 2) {//剩余的总瓶盖数要大于二,才能换得下一瓶饮料; dr n…...
Academic Inquiry|投稿状态分享(ACS,Wiley,RSC,Elsevier,MDPI,Springer Nature出版社)
作为科研人员,我们经常会面临着向学术期刊投稿的问题。一般来说,期刊的投稿状态会在官方网站上进行公示,我们可以通过期刊的官方网站或者投稿系统查询到我们投稿的论文的状态,对于不同的期刊在投稿系统中会有不同的显示。 说明&am…...
1+X运维试题样卷C卷(初级)
云计算C卷 单选题(200分) 1.在OSI模型中,HTTP协议工作在第()层,交换机工作在第()层。(10分) (答案未做:0分) A、7/3 B、7/2 (正确答案) C、6/3 D、6/2 2.Linux有三个查看文件的命令,若希望在查看文件内容过程中可以用光标上下移动来查看文件内容,应使用命令。(10分…...
Spring学习笔记(二)Spring的控制反转(设计原则)与依赖注入(设计模式)
一、控制反转:缩写IoC 是一种设计原则,降低程序代码之间的耦合度 对象由Ioc容器统一管理,当程序需要使用对象时直接从IoC容器中获取。这样对象的控制权就从应用程序转移到了IoC容器 二、依赖注入:缩写DI 依赖注入是一种消除类之…...
MySQL 基础知识(四)之表操作
目录 1 约束 2 查看已有表 3 创建表 4 查看表结构 5 修改表 6 删除表 1 约束 主键约束 primary key:唯一,标识表中的一行数据,此列的值不可重复,且不能为 NULL,此外,可以多个列组成主键唯一约束 uniq…...
计算机网络——10FTP
FTP FTP:文件传输协议 向远程主机上传输文件或从远程主机接收文件客户/服务器模式 客户端:发起传输的一方服务器:远程主机 ftp:RFC 959ftp服务器:端口号为21 FTP:控制连接与数据连接分开 控制连接 FTP客户端与FTP服…...
javascript中的this指向
文章目录 探索 JavaScript 中的神奇之谜:this关键字解析this 是什么?为何 this如此重要?this 的工作原理实例解析默认绑定隐式绑定显式绑定new 绑定 探索 JavaScript 中的神奇之谜:this关键字解析 JavaScript,作为一门…...
WebServer 之 http连接处理(下)
目录 ✊请求报文--解析 流程图 && 状态机 状态机 -- 状态转移图 主状态机 从状态机 http 报文解析 HTTP_CODE 含义 从状态机 逻辑 主状态机 逻辑 🐞请求报文--响应 基础API stat mmap iovec writev 流程图 HTTP_CODE 含义(2) 代码分析 …...
Android电量相关知识
关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业变现、人工智能等,希望大家多多支持。 目录 一、导读二、概览三、 查看耗电情况3.1 注册广播 ACTION…...
【Java多线程】线程中几个常见的属性以及状态
目录 Thread的几个常见属性 1、Id 2、Name名称 3、State状态 4、Priority优先级 5、Daemon后台线程 6、Alive存活 Thread的几个常见属性 1、Id ID 是线程的唯一标识,由系统自动分配,不同线程不会重复。 2、Name名称 用户定义的名称。该名称在各种…...
鸿蒙OS跨进程IPC与RPC通信
一、IPC与RPC通信概述 基本概念 IPC(Inter-Process Communication)与RPC(Remote Procedure Call)用于实现跨进程通信,不同的是前者使用Binder驱动,用于设备内的跨进程通信,后者使用软总线驱动…...
Effective Objective-C 学习(三)
理解引用计数 Objective-C 使用引用计数来管理内存:每个对象都有个可以递增或递减的计数器。如果想使某个对象继续存活,那就递增其引用计数:用完了之后,就递减其计数。计数变为 0时,就可以把它销毁。 在ARC中…...
蓝桥杯备赛攻略
背景 第十五届蓝桥杯大赛快要到比赛的时间了,按照惯例省赛就在4月9号开赛。有很多的小伙伴都报名了这次比赛,也有很多的同学问我应该怎么训练,什么水平可以拿奖。我自己也已经参加过两届蓝桥杯大赛了,拿到过国赛三等奖࿰…...
react反向代理
http-proxy-middleware 使用npm安装 npm i -D http-proxy-middleware 文档 点击查看 关键代码 const { createProxyMiddleware } require(http-proxy-middleware);module.exports function(app) {app.use(/api, // api开头的地址的请求createProxyMiddleware({target: ht…...
债券专题二:可转债估值-二叉树模型
1. 模型背景 由于可转债自身的属性较多,因此对其定价的难度也会加大,在诸多影响因素中,未来的股价占比最高。由于股价的不可预测性,导致了可转债的定价在实际交易中作用非常有限。随着可转债发行数量和规模的增大,越…...
【闲谈】开源软件的崛起与影响
随着信息技术的快速发展,开源软件已经成为软件开发的趋势,并产生了深远的影响。开源软件的低成本、可协作性和透明度等特点,使得越来越多的企业和个人选择使用开源软件,促进了软件行业的繁荣。然而,在使用开源软件的过…...
【教程】Linux使用aria2c多线程满速下载
转载请注明出处:小锋学长生活大爆炸[xfxuezhang.cn] 安装aria2c: sudo apt-get install aria2多线程下载: aria2c -x 16 -s 16 <url> 比如: aria2c -x 16 -s 16 http://images.cocodataset.org/zips/test2017.zip...
【漏洞复现】蓝网科技临床浏览系统信息泄露漏洞
Nx01 产品简介 蓝网科技临床浏览系统是一个专门用于医疗行业的软件系统,主要用于医生、护士和其他医疗专业人员在临床工作中进行信息浏览、查询和管理。 Nx02 漏洞描述 蓝网科技临床浏览系统存在信息泄露漏洞,攻击者可以利用该漏洞获取敏感信息。 Nx03…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...
JDK 17 序列化是怎么回事
如何序列化?其实很简单,就是根据每个类型,用工厂类调用。逐个完成。 没什么漂亮的代码,只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...
2.3 物理层设备
在这个视频中,我们要学习工作在物理层的两种网络设备,分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间,需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质,假设A节点要给…...
计算机系统结构复习-名词解释2
1.定向:在某条指令产生计算结果之前,其他指令并不真正立即需要该计算结果,如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方,那么就可以避免停顿。 2.多级存储层次:由若干个采用不同实现技术的存储…...
