如何通过Vue框架实现侧边栏完全隐藏的功能？

本文共计419个文字，预计阅读时间需要2分钟。

目录 + Vue框架将侧边栏完全隐藏 + Vue-element-admin隐藏侧边栏 + 解决办法 + Vue框架将侧边栏完全隐藏 + 如何将Vue的左侧边栏在缩进时完全隐藏？ + 效果图如下 + 找到目录src/style/sidebar.scss + 然后搜索隐藏侧边栏

目录

• vue框架将侧边栏完全隐藏
• vue-element-admin隐藏侧边栏
• 解决办法

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'

侧边栏彻底隐藏成功

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。