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

JavaScript014

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，来给定不同的长度：

<li class="submenu"><a class="dropdown " href="javascript:showMenu(1)" data-original-title="主菜单1"><span aria-hidden="true" class="icon icon-magnifier-add"></span><span class="hidden-minibar "> 主菜单1</span><span class="fa arrow"></span></a>

           <ul style="display: none" id="ul1">

            <li><a href="/agent/Order.asp" data-original-title="子菜单1"><span class="hidden-minibar "> 子菜单1</span></a></li>

            <li><a href="/agent/OrderBuy.asp" data-original-title="子菜单2"><span class="hidden-minibar "> 子菜单2</span></a></li>

            <li><a href="/agent/tkinfo.asp" data-original-title="子菜单3"><span class="hidden-minibar "> 子菜单3</span></a></li>

          </ul>

</li>

<li class="submenu"><a class="dropdown " href="javascript:showMenu(2)" data-original-title="主菜单2"><span aria-hidden="true" class="icon icon-magnifier-add"></span><span class="hidden-minibar "> 主菜单2</span><span class="fa arrow"></span></a>

           <ul style="display: none" id="ul2">

            <li><a href="/agent/Order.asp" data-original-title="子菜单1"><span class="hidden-minibar "> 子菜单1</span></a></li>

            <li><a href="/agent/OrderBuy.asp" data-original-title="子菜单2"><span class="hidden-minibar "> 子菜单2</span></a></li>

            <li><a href="/agent/tkinfo.asp" data-original-title="子菜单3"><span class="hidden-minibar "> 子菜单3</span></a></li>

          </ul>

</li>

<script>

function showMenu(s){

if(s == 1){

document.getElementById("ul1").style.display="block"

document.getElementById("ul2").style.display="none"

}else if(s == 2){

document.getElementById("ul2").style.display="block"

document.getElementById("ul1").style.display="none"

}

}

</script>

这样就行了