vue框架如何将侧边栏完全隐藏

最新推荐文章于 2024-08-17 11:33:09 发布

原创最新推荐文章于 2024-08-17 11:33:09 发布 · 3.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#java

VUE 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue应用中修改sidebar.scss文件，通过调整.hideSidebar类的样式，实现侧边栏在缩进时完全隐藏。主要涉及修改.sidebar-container和.main-container的宽度及transform属性，以及调整.main-container的margin-left，从而达到预期效果。

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;
    }