ElementUI侧边栏展开隐藏折叠功能
一般后台管理项目中无论是ElementUI或Iview 轻量UI框架都有很多组件来实现功能
我们需要实现的是这样子的:
在源代码里左侧菜单之前添加一个div,类名为“toggle-button”,然后在div中添加“|||”三个竖杠,作为可以折叠的图例:
然后为该div添加样式
然后给按钮添加事件事件:
那么点击事件触发后怎么控制和隐藏div的width宽度?
elementUI提供了菜单栏的振凯和隐藏的属性:collapse属性,collapse是控制菜单栏的展开和隐藏。如果是true的话隐藏菜单栏,如果是true的话启动功能
首先给这个el-menu绑定动态值:isCollapse。在data里也需要定义一下
然后再数据区定义这个动态值,名为“isCollapse”,默认为false:
然后点击事件来判断,触发该方法时,将isCollapse置为其相反值:
我们需要背景色也跟着菜单来折叠,怎样背景div宽度页随着点击事件发送变化。将侧边栏的宽度缩小(折叠的宽度大概是64px),然后isCollapse值为false的时候,侧边栏宽度恢复为200px。
可以使用三元运算符来实现
最终效果:
本文作者:Mahmud(مەھمۇد)
本文链接:https://www.cnblogs.com/mahmud/p/16867983.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步