侧边栏如何展开与收起

1.效果图：

2.实现思路：
利用el-menu的isCollapse来实现。

  <div class="left" :style="{width:isCollapse?'60px':'200px'}"><el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu><i  class="switch" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"   @click="isCollapse=!isCollapse"></i></div>  </div>// data中需定义isCollapse..el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}.left{position: relative;height: 600px;}.switch{display: inline-block;width: 40px;position: absolute;left: 10px;bottom: 10px;}

侧边栏如何展开与收起相关推荐

vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
Mr.J-- jQuery学习笔记(十六)--展开和收起动画折叠菜单的实现
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告与动 ...
展开和收起动画（jQuery）
展开和收起动画(jQuery) 废话不多说,上代码!!! <!DOCTYPE html> <html lang="en"><head><m ...
网页左侧固定菜单栏的展开与收起
网页左侧固定菜单栏的展开与收起 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 CSS3 JavaScript 作 ...
Vue 文本超过三行展示省略号，并加上展开和收起的功能
场景:在vue项目中文本超过三行展示省略号,并加上展开和收起的功能在处理多行文本时,经常会遇到各种各样的需求,比如至多展示三行,多余的部分不展示并以省略号结尾:又比如在这个基础上加上一个展开和收起的 ...
视频直播APP源码，通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果一. 实现思路需要设置一个变量控制展开 / 收起效果提前写好最高高度的class样式,超出这个高度多余内容会隐藏只有在列表数据长度 ...
【文本展开收起】uniapp—实现文本的展开与收起功能
一.实现效果二.代码实现 2.1 思路: 1.根据文本显示的布局中,每行大致能显示的文字个数 2.首先加载页面时,根据文字总长度判断是否超出自定义行数,来处理相应的数据,多余自定义行数,截取对应的文 ...
uni-app，文本实现展开、收起全文
效果: 思路: 1.根据文本显示的布局中,每行大致能显示的文字个数.(实例是大致每行26个文字) 2.首先加载页面时,根据文字总长度判断是否超出自定义行数,来处理相应的数据,多余自定义行数,截取对应的 ...
uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）
一.uni-app中,固定宽高,文字超出部分,隐藏并显示省略号. .topic_cont_text{padding: 30upx;colof: #999;background: #E1FFFF;max ...

侧边栏如何展开与收起

侧边栏如何展开与收起相关推荐

最新文章

热门文章