vue框架實現將側邊欄完全隱藏

Posted on by

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'

側邊欄徹底隱藏成功 

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：