當前位置:編程學習大全網 - 網站源碼 - Vue.js+Element-UI實現點擊按鈕控制左側菜單折疊與展開

Vue.js+Element-UI實現點擊按鈕控制左側菜單折疊與展開

在element-ui中采用NavMenu導航菜單作為系統菜單的實現。

官方文檔中NavMenu導航菜單有壹個Menu Attributes屬性collapse,是壹個 bollean 類型,用於控制是否水平折疊菜單。

我們可以通過設置collapse屬性的值為 true 或 false 來控制菜單的折疊與展開。

解決方案

1.實現壹個按鈕,

2.在data中定義壹個數據collapse

3.實現方法toggleCollapse

4.在el-menu中動態綁定屬性值collapse

問題:在左側菜單的展開與折疊中,文本和圖標折疊了,但是菜單的長度並沒有折疊,發現原因是菜單的長度給了壹個固定的值,而實際上我們需要動態給定長度。如果菜單是展開的,長度是等於文本的長度+圖標的長度。如果菜單是折疊的,長度是等於圖標的長度。我們可以根據isCollapse的值進行判斷,通過它的值為true或者是false,來給定不同的長度:

  • 上一篇:江南蜀都工業區屬於哪個區?
  • 下一篇:怎麽樣可以做新零售呢?
  • copyright 2024編程學習大全網