vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue将侧边栏完全隐藏

vue框架实现将侧边栏完全隐藏

作者:等樱花的龙猫

这篇文章主要介绍了vue框架实现将侧边栏完全隐藏,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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'

侧边栏彻底隐藏成功 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文