當前位置:菜譜大全網 - 菜譜大全 - Vue.js+Element-UI實現點擊按鈕控制左側菜單的折疊和展開。

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

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

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

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

解決辦法

1.實現壹個按鈕,

2.在數據中定義數據折疊。

3.實現方法toggleCollapse

4.動態綁定el菜單中的屬性值折疊。

問題:在左側菜單的展開和折疊中,文本和圖標是折疊的,但菜單的長度不是。發現原因是菜單的長度給定了壹個固定值,而實際上我們需要動態給定長度。如果菜單是展開的,則長度等於文本長度+圖標長度。如果菜單是折疊的,長度等於圖標的長度。我們可以根據isCollapse的值來判斷,通過其值的真假來給出不同的長度: