VueElementAdmin设置顶部导航，隐藏侧边栏

时间：2023-03-31 14:37:09 vue.js

.topmenu{宽度：100%；高度：62px；最小宽度：600px；背景：#324057；颜色：#fff；border-bottom:1pxsolid#1f2d3d;.logo-container{行高：60px；最小宽度：200px；.logo{高度：50px；宽度：50px；右边距：5px；垂直对齐：中间；显示：内联块；}.title{垂直对齐：中间；字体大小：18px；font-family:"微软雅黑";字母间距：3px；}}.menu{.el-submenu{//这个用于保持一级菜单之间的间隔padding:020px;}}}在src在/layout/components/index.js中，importTopMenu:...export{defaultasTopMenu}from'./TopMenu'注意：这里按照约定，虽然组件本身在js中是CamelCase，但是在template中,需要用kebab-case方式写隐藏侧边栏Sidebar是框架原有的左侧导航菜单，源码在src/layout/components/Sidebar，但是这里不能修改样式，需要修改src/styles/sidebar.scss文件：main-container{...margin-left:0px;//整个页面为前边留下的边距...}.sidebar-container{...//添加以下行以完全隐藏侧边栏指针-events:none;过渡持续时间：0.3s；转换：translate3d(-$sideBarWidth,0,0);}....hideSidebar{.sidebar-container{...//添加以下行以完全隐藏Sidebarpointer-events:none;过渡持续时间：0.3s；转换：translate3d(-$sideBarWidth,0,0);}.main-container{margin-left:0px;}}至此，已经添加了topguide和Hidingthesidebar当然topguide是静态的。如果需要像侧边栏一样根据路由变化，还需要进一步编码。

上一篇：Echarts折线图配置虚线

下一篇：哭了，本以为把前端面试题和高频考点刷一遍就够了，没想到面试官又挖深问了

VueElementAdmin设置顶部导航，隐藏侧边栏相关文章