Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

这里以ElementUI为例，官方功能实现模板。

使用

在官方的文档中，主要是靠一个 collapse 属性，它用来控制是否水平折叠收起菜单（仅在 mode 为 vertical 时可用），是一个Boolean类型，默认值为false，可以根据这个 collapse 属性，通过设置它的true或者false的值控制菜单的折叠与展开。false 为展开，true 为折叠。简单理解就是，这个属性是用来判断菜单是否折叠的，所以默认为不折叠（false）。

所以，控制折叠与展开，只要改变这个属性即可，直接写一个方法就可以解决。

左侧菜单问题

在左侧菜单的展开与折叠中，会发现一个问题，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度。

<el-aside :width="isCollapse?'64px':'200px'"></el-aside>

动画

在实现功能后，可以发现是有一定的延迟动画效果的，在左侧导航栏中可能会出现一定的显示问题。

菜单的折叠与展开Element中默认是有动画的，不方便显示，我们可以选择关闭，在官方文档的Menu Attribute中，有一个collapse-transition 属性。它的作用是用来是否开启折叠动画，是一个 boolean 类型，默认值为true（开启），把它设置为false，就可以关闭折叠动画了。

:collapse-transition="false"

这样看着就好多了。