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;
}
好了,成功了,缩进的时候就不会展示小菜单栏了