vue2左側(cè)菜單欄收縮展開功能實(shí)現(xiàn)

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

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

1. Main.vue頁面代碼

a. 修改側(cè)邊欄屬性

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

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

下面是效果展示：

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

b. 修改頭部導(dǎo)航欄

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

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

c. 定義我們的變量

我們在return中定義我們的collapseBtnClass圖標(biāo)變量；

定義Aside.vue中的sidewidth左側(cè)菜單欄寬度

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

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

d. collapse函數(shù)

這里我們函數(shù)的邏輯是：

當(dāng)我們點(diǎn)擊收縮菜單圖標(biāo)時(shí)，isCollapse變量為flase；

當(dāng)我們的isCollapse變量為false時(shí)，this.sidewidth寬度為64，圖標(biāo)設(shè)置為收縮圖標(biāo)

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

相反：我們的菜單寬度為220；設(shè)置展開圖標(biāo)，系統(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頁面代碼

首先在我們面包屑上面加一個(gè)span標(biāo)簽：

綁定我們的class為collapseBtnClass：

設(shè)置一個(gè)點(diǎn)擊事件：collapse

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

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

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

3. Aside.vue頁面代碼

我們在標(biāo)簽<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)名稱給一個(gè)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
}
<!--其它代碼-->

現(xiàn)在會有一個(gè)問題，我們點(diǎn)擊收縮菜單欄時(shí)菜單文字會有遺留，我們給一個(gè)樣式來隱藏文字

<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>

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

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

您可能感興趣的文章: