官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse,是一个 bollean 类型,用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮,
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题:在左侧菜单的展开与折叠中,文本和图标折叠了,但是菜单的长度并没有折叠,发现原因是菜单的长度给了一个固定的值,而实际上我们需要动态给定长度。如果菜单是展开的,长度是等于文本的长度+图标的长度。如果菜单是折叠的,长度是等于图标的长度。我们可以根据isCollapse的值进行判断,通过它的值为true或者是false,来给定不同的长度:
{{item}}{{itemCon}}
var vm = new Vue({
el: '#app',
data: {
tabs: ["标题一", "标题二","标题三"],
tabContents: ["内容一", "内容二","内容三"],
num: 1
},
methods: {
tab(index) {
this.num = index
}
}
})