element 菜单修复03-王荣荣如此唯美

最新推荐文章于 2023-04-12 10:32:32 发布
最新推荐文章于 2023-04-12 10:32:32 发布
阅读量187 收藏
点赞数
分类专栏： VUE2.x
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15009739/article/details/114354628
版权

el-menu 折叠和展开功能实现：

 

这个功能很简单，当我们点击控制按钮的时候，控制 el-menu 的折叠和展开的状态维护，

还有一个就是 el-aside 侧边栏的宽度， 折叠的时候窄一些，不折叠宽一些，说白了，一个状态决定两个结构都发生变化

1， 加控制结构：

2，加处理函数：

isExpand 肯定是响应式，这样才能视图状态发生变化！

isExpand 真为折叠，假为不折叠！

4， 根据状态决定结构发生变化，

最低0.47元/天 解锁文章
爱生活，爱编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用elementui做后台管理系统，el-aside(el-menu)与el-main高度不一的问题，实现el-aside(el-menu)占满整个页面，以及实现多级菜单。
qq_51758070的博客
08-23 6904
先来看看问题1：（实现el-menu占满整个页面）这是el-menu没有设置高度出现的问题这是将el-menu这块高度设置为100vh，出现的问题最后，解决问题 ，如图 在App.vue中，添加以下代码 在布局文件中，也就是在以下文件中，给container类添加戴拿 最后，也就是在el-main里面，即TabInner里面添加以下代码 问题2：实现多级菜单做法：遍历从父组件传过来的menuData数组数据（菜单栏数据），如果数据里有children属性，则建立一个父级菜单名，并再次循环去判断
如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？
sun19931127的博客
01-10 1552
页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。
element使用菜单收起折叠，发现aside不随折叠宽度而变化,收起后文字不隐藏，子菜单突出解决方案
CHENC0518的博客
04-12 1780
1.只需要为el-side添加 即可解决。
Vue的导航栏和布局
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
11-30 796
el-menu标签里面加上：router=true和 el-submenu里面的el-menu-item里面加上index="/你的路径名称"相当于rounter-link to的功能，也就是路由跳转的功能 这个是用弹性布局display:flex实现的 相关的代码： <template> <section> <div id="app" style="width: 100%;height: 60px; background-color:#B3C0D1.
element-ui table 滚动条变细
Wcharles666的博客
12-29 4291
在全局样式中加入以下css,只对Google浏览器生效 // 滚动条的宽度 ::-webkit-scrollbar { width: 8px; height: 8px; } // 滚动条的滑块 ::-webkit-scrollbar-thumb { background-color: #a1a3a9; border-radius: 4px; } ...
高一含氯消毒剂探究-尚荣荣.pptx
11-13
【知识点详解】 1. **含氯消毒剂的基本概念**： 含氯消毒剂主要指以次氯酸钠（NaClO）为主要成分的消毒剂，广泛用于家庭、医院、公共场所等的清洁消毒，能够有效地杀灭细菌和病毒。 2. **84消毒液的成分与作用**...
conference-room-management-master.zip
09-17
2. **Element UI**：这是一个基于Vue.js的UI组件库，提供了一系列美观且易用的界面元素，如表格、按钮、提示、下拉菜单等，帮助开发者快速搭建企业级后台应用。Element UI的设计风格简洁，易于定制，符合大多数后台...
荣荣TOKYO.mp4;filename=
最新发布
03-15
荣荣TOKYO.mp4;filename=
荣荣网易论坛顶贴机v6.6.2.29官方免费安装版
08-06
荣荣网易论坛顶贴机是一款免费的网易论坛专用的顶贴软件，网易论坛拥有超高的用户，网络推广营销人员可以利用这款软件在网易论坛进行推广营销，让你的帖子始终保留在前几名，能够有机会让更多的人看到，非常实用，...
Awesome-Aesthetic-Evaluation-and-Cropping
05-17
盛克凯，董卫明，柴梦雷，王国辉，周鹏，黄飞跃，胡保刚，纪荣荣，马重阳：“通过自我监督特征学习重新审视图像美学评估。 ” AAAI（2020） 陈秋雨，张伟，周宁，雷鹏，徐怡，郑宇，范建平：“用于图像美学评估的...
修改el-submenu子组件el-menu-item宽度
qq_42022928的博客
09-03 1万+
el-submenu默认样式 修改后样式 修改方法 在css中添加如下代码： .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{ min-width: 120px!important; }
更改elementUI组价样式
qq_41011723的博客
02-23 2053
在一次做导航栏的时候需要用到菜单组件，觉得el-menu-item的宽度太大了，封装的是200px。 注意这里的el-menu-item是下拉框中的item，而不是标题！不是很想放图片，就用一级路径描述来表示导航栏的一项，用二级路径表示鼠标悬浮才出现的下拉项（表述可能不恰当，意会即可） 在当前组件的’<style_>'添加 .el-menu--horizontal { heig...
element ui 菜单收缩
jiaoqi6132的博客
07-01 3027
<template> <div> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> <el-radio-button :label="false">展开</el-radio-button> <el-radio-button :label="true">收起</el-radio-button> &..
一个样式解决element-ui侧边栏组件el-menu占不满屏幕的问题
e274426380的博客
09-23 5863
网上解决这个问题的方法都非常麻烦，比如加很多很多高度100%，而有些人又没法复现这种成功。 在这里分享一个新属性给大家试试，非常有效 height:100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， https://blog.csdn.net/qq_16687863/article/details/100516013 但是设置height:100vh，该元素
ElementUI中遇到的问题
jiaweide123的博客
06-06 1137
解决使用ElementUI过程中遇到的问题
修改el-dropdown-item长度，elementUI样式修改
xixisi888的博客
08-24 1万+
使用的组件： el-dropdown 实现前：下拉选择框太长，需要改小长度 实现后效果： 直接style修改样式就行，利用就近原则。 <el-dropdown @command="analyze_command" style="float:right;margin-right:10px;" trigger="click" :split-button="true" type="primary" placement="bottom-e.
elementUI组件el-dropdown - 踩坑篇
热门推荐
草巾冒小子的博客
04-19 4万+
效果图： 正确的代码如下： <div class="it-after" v-if=" resume.phone != ''"> <p class="it-telphone clamp1">{{resume.phone}}</p> <div class="btn3"><el-button type="primary" icon="el-i...
el-dropdown下拉框不对齐问题
Naaaano的博客
12-14 4750
今天在写后台的时候很蛋疼的发现el-dropdown下拉选择插件的下拉框居然错位了，如下图： 可以很明显的看到这个下拉框的位置有些向左边偏，身为强迫症的我不能忍！！一顿排查后发现仅仅是因为下拉菜单的题目是2个字，上面的div长度太短导致的。 我首先想到直接去改个css样式完事，由于elementUI的各种下拉框都是基于popper.js动态计算绝对定位的位置，每次屏幕大小变化或者重新打开下拉框都会重置该框的样式，没法改left值，于是加了这段代码： .el-dropdown-menu { margin-
关于element-ui中的dropdown组件的两个坑
agua001的博客
08-07 2939
一、样式覆盖 一般组件样式覆盖可以使用嵌套写在某个盒子里面，但是dropdown不可以，我指的是下拉菜单项的样式，如图： 比如home页面 <style scoped lang="scss"> .home { .main { background: pink; } } // 写在外面 .personalCenter { /deep/ .el-dropdown-menu__item { width: 90px; text-align: center; } } &l
800字的情书，名字荣荣
06-01
) % 256; lcd_init(); // LCD1602初始化 lcd_display(0, 0, "TIME:"); sprintf(str, "%02d:%02d", time_set, 0); lcd_display(6, 0, str); while亲爱的荣荣， 我写这封信给你，是因为我想告诉你，我对你的感情 (1) { if (K1 == 0) // 增加1分钟按键 { delay(20); if (K1 == 0) { add_time(); while (!K1); } } else if (K2 == 0) // 减少1分钟按键 { delay(20); if (K2 == 0) { sub_time(); while (!K2); } } else if (K3 == 已经超越了友谊，我爱你。 我们相识已有多年，每一次和你在一起，0) // 5分钟按键 { delay(20); if (K3 == 0) { 我的内心都充满了喜悦和幸福。你的笑容、温柔和聪明，深深地吸引了我。我喜欢和你在一起的每一刻，不管是欢笑还是泪水，我都希望能和你分享。 我一直在想，如果我们在一起会是怎样的感觉。我希望我们 set_5min(); while (!K3); } } else if (K4 == 0) // 10可以一起经历生命中的每一个阶段，分享喜悦和忧愁，共同克服困难。我愿意陪伴你，一直走下去。 我知道爱是需要勇气和信心的，但我已经分钟按键 { delay(20); if (K4 == 0) { set_10min(); while (!K4); } } else if (K5 == 0) // 20分钟按键 下定决心了。我爱你，对我来说，你是这个世界上最重要的人。我 { delay(20); if (K5 == 0) { set_20min(); while (!K5希望你能够接受我的爱，给我们一个机会来证明我们的真心。 我想和你一起); } } else // 没有按键按下 { sprintf(str, "%02d:%02d",创造美好的未来，一起走过每一个难关，一起见证我们的成长。我相信 min, sec); lcd_display(6, 0, str); delay(100); } } } ``` 这段我们可以一起实现我们的梦想，一起创造属于我们的幸福。 最后，我想说的代码可以实现您所描述的倒计时功能，并且可以通过按键设置倒计时时间，并在LCD上显示倒是，无论你是否选择回应我的情感，我都会一直珍惜我们之间的友谊。我爱你，荣荣。 爱你的（你的名字）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值