vue使用element元件實現選單的摺疊與展開

今天會下雨嗎 發表於 2020-11-21
Vue
1.實現效果

1.未摺疊時
在這裡插入圖片描述
2.摺疊後
在這裡插入圖片描述

2. 程式碼
  • template
<el-container>
  <!--側邊欄-->
  <!--側邊欄選單區-->
  <el-aside :width="isCollapse ? '64px' : '200px' ">
    <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409Eff"
      :collapse="isCollapse"	//給Collapse動態賦值
      :collapse-transition="false"
      >
    </el-menu>
  </el-aside>
</el-container>
  • script
data(){
	return{
	  isCollapse:false,
	}
}
methods:{
  //點選按鈕摺疊選單
  toggleCollapse(){
    this.isCollapse = !this.isCollapse;	//點選摺疊按鈕後,對isCollapse進行取反
  }
},
說明
  • collapse:element NavMenu 導航選單元件的一個能讓選單摺疊或收起的屬性

    • 預設為false,為true時可摺疊
  • :width="isCollapse ? '64px' : '200px' "表示:如果isCollapse值為false,寬度為200px;若isCollapse值為true,寬度為64px