vue框架實現(xiàn)將側(cè)邊欄完全隱藏

更新時間：2022年08月13日 16:06:59 作者：等櫻花的龍貓

這篇文章主要介紹了vue框架實現(xiàn)將側(cè)邊欄完全隱藏，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue框架將側(cè)邊欄完全隱藏

如何將vue的左側(cè)邊欄在縮進的時候完全隱藏呢

效果圖如下

找到目錄src/style/sidebar.scss 然后搜索.hideSidebar可以搜出兩個，不要慌，下面的時手機端的，我們拉到上面的.hideSidebar找到

.hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }
    .main-container {
      margin-left: 54px;
    }

修改.sidebar-container與.main-container里的內(nèi)容

.sidebar-container {
      width: 54px !important;
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(-$sideBarWidth, 0, 0);
    }
    //這個是展示/隱藏按鈕所在的這個條條距離左側(cè)位置，自己調(diào)一下就能看出效果了
    .main-container {
      margin-left: 0px;
    }

好了，成功了，縮進的時候就不會展示小菜單欄了

vue-element-admin隱藏側(cè)邊欄

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

此時電腦端側(cè)邊欄位置會顯示一塊空白部分

解決辦法

在 src\layout\components\index.js 里注釋掉側(cè)邊欄部分

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'

側(cè)邊欄徹底隱藏成功

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)抖音時間轉(zhuǎn)盤
這篇文章主要為大家詳細介紹了vue實現(xiàn)抖音時間轉(zhuǎn)盤，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
關(guān)于Vue的?Vuex的4個輔助函數(shù)
這篇文章主要介紹了關(guān)于Vue的?Vuex的4個輔助函數(shù),輔助函數(shù)的好處就是幫助我們簡化了獲取store中state、getter、mutation和action,下面我們一起來看看文章具體的舉例說明吧，需要的小伙伴也可以參考一下
2021-12-12
Vue 自定義指令實現(xiàn)一鍵 Copy功能
指令 (Directives) 是帶有 v- 前綴的特殊特性。這篇文章主要介紹了Vue 自定義指令實現(xiàn)一鍵 Copy的功能,需要的朋友可以參考下
2019-09-09
vue關(guān)于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式
這篇文章主要介紹了vue關(guān)于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue首評加載速度及白屏?xí)r間優(yōu)化詳解
這篇文章主要介紹了vue項目優(yōu)化首評加載速度，以及白屏?xí)r間過久的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-09-09
跟混亂的頁面彈窗說再見
這篇文章主要介紹了跟混亂的頁面彈窗說再見，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue自動生成組件示例總結(jié)
在Vue中,我們可以使用unplugin-generate-component-name插件自動基于目錄名稱生成組件名稱,這個插件使得在大型代碼庫中找到和管理組件更加容易和直觀,這篇文章主要介紹了Vue自動生成組件示例總結(jié),需要的朋友可以參考下
2023-12-12
vue prop屬性傳值與傳引用示例
今天小編就為大家分享一篇vue prop屬性傳值與傳引用示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
如何實現(xiàn)echarts markline標簽名顯示自己想要的
這篇文章主要介紹了實現(xiàn)echarts markline標簽名顯示自己想要的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue + el-form 實現(xiàn)的多層循環(huán)表單驗證
這篇文章主要介紹了vue + el-form 實現(xiàn)的多層循環(huán)表單驗證，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下。
2020-11-11