您现在的位置是：网站首页> 编程资料编程资料
vue框架实现将侧边栏完全隐藏_vue.js_
2023-05-24
331人已围观
简介 vue框架实现将侧边栏完全隐藏_vue.js_
vue框架将侧边栏完全隐藏
如何将vue的左侧边栏在缩进的时候完全隐藏呢
效果图如下
找到目录src/style/sidebar.scss 然后搜索.hideSidebar可以搜出两个，不要慌，下面的时手机端的，我们拉到上面的.hideSidebar找到
.hideSidebar { .sidebar-container { width: 54px !important; } .main-container { margin-left: 54px; } 修改.sidebar-container与.main-container里的内容
.sidebar-container { width: 54px !important; pointer-events: none; transition-duration: 0.3s; transform: translate3d(-$sideBarWidth, 0, 0); } //这个是展示/隐藏按钮所在的这个条条距离左侧位置，自己调一下就能看出效果了 .main-container { margin-left: 0px; } 好了，成功了，缩进的时候就不会展示小菜单栏了
vue-element-admin隐藏侧边栏
在 src/style/sidebar.scss 里搜索hideSidebar找到以下部分
.hideSidebar { .sidebar-container { width: 54px !important; } .main-container { margin-left: 54px; }修改为
.sidebar-container { width: 54px !important; pointer-events: none; transition-duration: 0.3s; transform: translate3d(-$sideBarWidth, 0, 0); } .main-container { margin-left: 0px; }此时电脑端侧边栏位置会显示一块空白部分
解决办法
在 src\layout\components\index.js 里注释掉侧边栏部分
export { default as AppMain } from './AppMain' export { default as Navbar } from './Navbar' export { default as Settings } from './Settings' // export { default as Sidebar } from './Sidebar/index.vue' export { default as TagsView } from './TagsView/index.vue'侧边栏彻底隐藏成功
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章:
