Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开

JavaScript041

Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开,第1张

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。

解决方案

1.实现一个按钮，

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

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

在<body>中加入：onload="showHide(e,objname)"即可。即<body onload="showHide(e,objname)">

objname要根据实际变换成实际的objname

var lastFaqClick=null

var expandIndex = 1//设置展开一个

window.onload=function(){

var faq=document.getElementById("faq")

var dls=faq.getElementsByTagName("dl")

for (var i=0,dldl=dls[i]i++){

var dt=dl.getElementsByTagName("dt")[0]//取得标题

dt.id = "faq_dt_"+(Math.random()*100)

dt.onclick=function(){

var p=this.parentNode//取得父节点

if (lastFaqClick!=null&&lastFaqClick.id!=this.id){

var dds=lastFaqClick.parentNode.getElementsByTagName("dd")

for (var i=0,dddd=dds[i]i++)

dd.style.display='none'

}

lastFaqClick=this

var dds=p.getElementsByTagName("dd")//取得对应子节点，也就是说明部分

var tmpDisplay='none'

if (gs(dds[0],'display')=='none')

tmpDisplay='block'

for (var i=0i<dds.lengthi++)

dds[i].style.display=tmpDisplay

}

if(i == expandIndex){

dt.onclick()

}

}

}

//你是页面之间传递参数 还是你用脚本点击按钮等传递参数?

//页面传递的话你直接修改expandIndex值 如果用js修改expandIndex值你再重新调用这函数 也就是重新绑定点击事件 方法很多你随便想想就会有的