The NavMenu navigation menu in the official document has a Menu Attributes attribute collapse, which is bollean type and is used to control whether the menu collapses horizontally.

We can control the collapse and expansion of the menu by setting the value of the collapse property to true or false.

solution

1. Implement a button,

2. Define data folding in the data.

3. Implement method toggleCollapse

4. The property values in the dynamic binding el menu are collapsed.

Problem: In the expansion and collapse of the left menu, the text and icons are collapsed, but the length of the menu is not. The reason is that the length of the menu is given a fixed value, but in fact we need to give the length dynamically. If the menu is expanded, the length is equal to the text length+the icon length. If the menu is collapsed, the length is equal to the length of the icon. We can judge by the value of isCollapse, and give different lengths by the truth of its value: