Element-UI侧边导航栏折叠后弹出框样式修改

最新推荐文章于 2023-08-15 15:06:36 发布
最新推荐文章于 2023-08-15 15:06:36 发布
阅读量986 收藏 3
点赞数
文章标签： css 前端 vue.js elementui Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56907208/article/details/129572274
版权

侧边导航栏折叠后弹出框样式如图所示，当导航标题较短时后面留白很多，强迫者患者表示没法忍！

鼠标点击侧边栏时弹出的盒子与侧边导航栏的盒子同级，同属于同一个父元素，打开浏览器开发者模式查看动态变化后感觉像是一个插槽，所以修改样式时 不能有scoped，因为他们不在同一个组件中, 修改的样式无法生效

修改方法

  1. 去除style 中的scoped属性，怕影响其它组件的话就去公共样式里面写

  1. 重写显示框样式

way1: 使用!important使属性值有最高优先级
way2: 待续。。。

不足之处，请多指教！！！

谁用了我的T-Rex?
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element折叠面板(默认展开)的使用及样式修改
学习记录
11-19 1万+
效果图： HTML部分： <el-collapse v-model="activeNames" style="border:none;margin-left:30px;"> <el-collapse-item name="1"> <template slot="title"> <p class="title">运行信息</p> </template&
ElementUI之侧边导航栏样式修改
m0_56409834的博客
08-26 5178
elementUi的导航栏样式更改
element-ui el-dialog侧边弹窗可横向拖拽改变宽度
qq_30907845的博客
05-13 2557
el-dialog侧边弹窗可横向拖拽改变宽度，并且存储到localStorage，刷新页面后依然是拖拽后的宽度 Vue.directive('dialogDrag', { inserted: function (el) { const dragDom = el.querySelector(".el-dialog"); dragDom.style.cursor = "e-resize"; const dialogHeader = el.querySelector('.el-dialog__hea
vue+element-ui实现Dropdown侧边弹出
fantacyqq的博客
07-19 2164
前端新手，需要实现侧边弹出菜单，在element官网找到dropdown，但其中placement中没有侧边弹出的方法，遂尝试手动填入placement=“left-start”，竟然实现了，说明dropdown里是有内置的弹出方向的，记录学习。
后台管理----菜单折叠展开
weixin_51614564的博客
08-16 1275
后台管理实现左侧菜单栏的折叠与展开
element-ui使用导航栏跳转路由的用法详解
12-29
最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子，在这基础上再修改成我们想要...
element-ui 实现响应式导航栏的示例代码
10-15
在本文中，我们将深入探讨如何使用Element UI框架实现响应式导航栏。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI元素，用于快速构建美观的前端界面。然而，它默认并不提供传统的顶部导航栏组件，因此...
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，...这个“element-ui.rar”压缩包就是你开始使用 Element UI 的起点，解压后可以查看其内部结构，进一步学习和了解每个组件的用法。
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1051
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
vue+elementui实现鼠标触及当前页面右边缘，右侧弹出新的对话框
sumire27的博客
08-15 1599
目前项目中需要自定义大屏，但是大屏右侧显示矩形对话框有一点突兀，所以做成鼠标靠近页面右侧边缘的时候对话框弹出，点击对话框上的回缩按钮后，对话框隐藏。
(Dialog)解决：Element-ui 中 Dialog 弹出对话框的样式的修改问题
热门推荐
狮子座的男孩
07-19 1万+
代码】解决Element-ui中Dialog弹出对话框的样式的修改问题。
修改element ui的导航菜单样式，包括下拉菜单
skyfall321的博客
12-02 4026
修改elment UI的导航菜单和下拉菜单的字体大小、宽高等样式
element ui NavMenu 实现侧边栏导航菜单
Igiveufireworks的博客
05-08 1947
使用Element UI 的 Container 布局容器和NavMenu导航菜单组件，使用router-view存放二级路由出口。根据v-for遍历菜单参数，渲染导航栏。
element-ui折叠面板怎么修改样式
daimaxiaodao的博客
10-04 4682
修改element-ui的折叠面板需要使用样式穿透
vue+elementUI侧边栏的实现
qq_39792789的博客
03-19 8942
需求：无 实现的功能： 利用elementUI实现侧边栏功能，为了更好的展示菜单内容 使用版本： nodejs v14.16.1 vue 2.9.6 npm 6.14.12 webpack 3.12.0 node-sass 4.14.1 sass-loader 7.1.0 环境问题见往期文章 使用的技术： ① ......
Vue - 完美解决 Element UI 侧边导航菜单 ＜el-menu＞ 出现滚动条，去掉 Element 侧边导航组件的横纵滚动条（但滚动功能依然保留，仅仅是去掉 “滚动条“）100% 解决方案
王佳斌
03-27 6848
vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去除的滚动条，element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜
element使用菜单收起折叠，发现aside不随折叠宽度而变化,收起后文字不隐藏，子菜单突出解决方案
CHENC0518的博客
04-12 1747
1.只需要为el-side添加 即可解决。
ElementUi之dialog弹窗
Lydia
08-25 4769
ElementUi之dialog弹窗。
work-notes（12）：如何二次封装 Element UI 的 dialog 弹窗，发现弹窗只能点击触发一次是什么原因，如何解决弹窗只能触发一次的问题？
jinzai9976的博客
05-15 2203
时间：2022-05-15 文章目录问题描述问题分析1、如何二次封装 element UI 的 dialog 弹窗？2、实现过程（1）在 script 标签 中 props 传入值（2）绑定到 dialog 标签内主要结构：个人例子：解释3、弹窗为什么只能点击触发一次，第二次之后都没有反应？4、实现过程（1）在调用的页面写一个 close 函数传入；个人例子（2）在子组件内部进行绑定具体内部调用个人例子 问题描述 前些天，公司要求制作一个私库，并且是在 element UI 的组件上进行二次封装，所以引生出
element-ui的气泡弹出框
最新发布
09-21
element-ui的气泡弹出框是一个常用的交互组件，它可以在点击按钮或其他元素时弹出一个气泡框，用于展示确认信息或其他相关内容。在使用element-ui的气泡弹出框时，需要注意以下几点： 1. 确保正确绑定事件：在代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值