vue2左側菜單欄收縮展開功能實現

更新時間：2024年04月29日 10:28:48 作者：Java-云海

vue2左側菜單欄收縮展開目前是非常常見的,我們在日常開發(fā)過程中經常會碰到,這篇文章給大家介紹vue2左側菜單欄收縮展開功能,感興趣的朋友跟隨小編一起看看吧

1. Main.vue頁面代碼

a. 修改側邊欄屬性

我們給我們導入的Aside組件動態(tài)綁定一個isCollapse。然后再下面的方法中定義

logoTextShow是我們動態(tài)綁定的系統(tǒng)名稱：當我們點擊收縮菜單時，系統(tǒng)名稱會隱藏，展示我們的系統(tǒng)圖標。

下面是效果展示：

<!--其它代碼-->
<!-- 側邊欄 -->
<el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);height: 100%">
  <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
</el-aside>
<!--其它代碼-->

b. 修改頭部導航欄

頭部導航欄是我們點擊收縮展開按鈕的地方，我們在這里動態(tài)綁定點擊函數。collapse函數就是我們動態(tài)綁定的函數。

<!--其它代碼-->
<!-- 頭部導航欄 -->
<el-header style="border-bottom: 1px solid #ccc;">
  <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
</el-header>
<!--其它代碼-->

c. 定義我們的變量

我們在return中定義我們的collapseBtnClass圖標變量；

定義Aside.vue中的sidewidth左側菜單欄寬度

還有默認展示我們的系統(tǒng)名稱而不是展示logo圖片

<!--其它代碼-->
data () {
  return {
    collapseBtnClass: 'el-icon-s-fold',
    isCollapse: false,
    sideWidth: 220,
    logoTextShow: true
  }
},
<!--其它代碼-->

d. collapse函數

這里我們函數的邏輯是：

當我們點擊收縮菜單圖標時，isCollapse變量為flase；

當我們的isCollapse變量為false時，this.sidewidth寬度為64，圖標設置為收縮圖標

然后我們的系統(tǒng)名稱隱藏；

相反：我們的菜單寬度為220；設置展開圖標，系統(tǒng)名稱菜單展示

<!--其它代碼-->
methods: {
  collapse () {
    this.isCollapse = !this.isCollapse
    if (this.isCollapse) {
      this.sideWidth = 64
      this.collapseBtnClass = 'el-icon-s-unfold'
      this.logoTextShow = false
    } else {
      this.sideWidth = 220
      this.collapseBtnClass = 'el-icon-s-fold'
      this.logoTextShow = true
    }
  }
}
<!--其它代碼-->

2. Header.vue頁面代碼

首先在我們面包屑上面加一個span標簽：

綁定我們的class為collapseBtnClass：

設置一個點擊事件：collapse

<!--其它代碼-->
<span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>
<!--其它代碼-->

這里牽扯到一個父子傳值和子子傳值。父子傳值我們在子組件里面接收就要用props來接收

<!--其它代碼-->
props: {
  collapseBtnClass: String,
  collapse: Function
}
<!--其它代碼-->

3. Aside.vue頁面代碼

我們在標簽<el-menu>綁定我們的屬性：

<el-menu
    :default-openeds="[]" style="min-height: 100%; overflow-x: hidden"
    background-color="#1f2d3d"
    text-color="#fff"
    default-active="/home"
    active-text-color="rgb(75 175 255)"
    :collapse-transition="false"
    :collapse="isCollapse"
    router>

系統(tǒng)名稱給一個v-show事件

<div style="height: 60px; line-height: 60px; text-align: center">
  <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 2px;">
  <b style="color: white" v-show="logoTextShow">倉庫管理系統(tǒng)</b>
</div>

然后我們在下面接收父組件傳遞的值：

<!--其它代碼-->
props: {
  isCollapse: Boolean,
  logoTextShow: Boolean
}
<!--其它代碼-->

現在會有一個問題，我們點擊收縮菜單欄時菜單文字會有遺留，我們給一個樣式來隱藏文字

<style>
.el-menu-item.is-active {
  background-color: rgb(38, 52, 69) !important;
}
.el-menu-item:hover {
  background-color: rgb(38, 52, 69) !important;
}
.el-submenu__title:hover {
  background-color: rgb(38, 52, 69) !important;
}
/*解決收縮菜單文字不消失問題*/
.el-menu--collapse span {
  visibility: hidden;
}
</style>

以上就是我們的菜單欄收縮展開全部教程。

到此這篇關于vue2左側菜單欄收縮展開功能的文章就介紹到這了,更多相關vue2菜單欄收縮展開內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: