vue移动端时弹出侧边抽屉菜单效果 vue移动端时弹出侧边抽屉菜单

效果图：

文章图片

aside.vue:

.aside {height: 100vh; .ps {height: calc(100vh - 60px); //展开时宽度.el-menu-vertical-demo:not(.el-menu--collapse) {width: 256px; }.el-menu {height: 100%; border: 0 !important; //垂直时，去除右侧白边}//item激活时的样式.el-menu-item.is-active {background-color: #1890ff !important; border-bottom: 0 !important; }}}

控制抽屉显隐：

由于上面使用了hidden-sm-and-up样式，该样式需要在main.js中引入display.css，如下：

import 'element-ui/lib/theme-chalk/display.css';

更多样式参考：
Vue中使用vue2-perfect-scrollbar制作滚动条
element-ui 实现响应式导航栏的示例代码
到此这篇关于vue移动端时弹出侧边抽屉菜单的文章就介绍到这了,更多相关vue弹出侧边抽屉菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！