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項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
element基于el-form智能的FormSmart表單組件
本文主要介紹了element基于el-form智能的FormSmart表單組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue分別運(yùn)用class綁定和style綁定通過(guò)點(diǎn)擊實(shí)現(xiàn)樣式切換
這篇文章主要為大家介紹了Vue分別運(yùn)用class綁定和style綁定通過(guò)點(diǎn)擊實(shí)現(xiàn)樣式切換，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果
這篇文章主要介紹了vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05
vue 左滑刪除功能的示例代碼
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01
vue各種事件監(jiān)聽(tīng)實(shí)例(小結(jié))
這篇文章主要介紹了vue各種事件監(jiān)聽(tīng)實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
Vue使用mockjs問(wèn)題(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)
這篇文章主要介紹了Vue使用mockjs問(wèn)題(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2023-05-05
Vue+Echart柱狀圖實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計(jì)
這篇文章主要介紹了在Vue nuxt項(xiàng)目中，如何使用Echart(百度圖表)柱狀圖來(lái)實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計(jì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2021-12-12
Vue實(shí)現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無(wú)法打開(kāi)”的解決方法
xlsx用于讀取解析和寫(xiě)入Excel文件的JavaScript庫(kù),它提供了一系列的API處理Excel文件,使用該庫(kù),可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出Excel表格,提示文件已損壞,無(wú)法打開(kāi)的解決方法,需要的朋友可以參考下
2024-01-01