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

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

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

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

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

效果圖如下

找到目錄src/style/sidebar.scss 然后搜索.hideSidebar可以搜出兩個(gè)，不要慌，下面的時(shí)手機(jī)端的，我們拉到上面的.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);
    }
    //這個(gè)是展示/隱藏按鈕所在的這個(gè)條條距離左側(cè)位置，自己調(diào)一下就能看出效果了
    .main-container {
      margin-left: 0px;
    }

好了，成功了，縮進(jìn)的時(shí)候就不會(huì)展示小菜單欄了

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

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

解決辦法

在 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è)邊欄徹底隱藏成功

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

您可能感興趣的文章:

相關(guān)文章

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