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

JavaScript012

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

知道你要啥样的，就说个最简单的竖列折叠菜单吧,比如：

菜单1

子菜单1

子菜单2

……

菜单2

子菜单1

子菜单2

……

如果要做这样的折叠菜单 那html为：

<div class="menu">

    <div>菜单1</div>

    <ul>

        <li>子菜单1</li>

        <li>子菜单2</li>

        ……

    </ul>

</div>

<div class="menu">

    <div>菜单1</div>

    <ul>

        <li>子菜单1</li>

        <li>子菜单2</li>

        ……

    </ul>

</div>

css为：(没样式只有功能，样式自己去加)

.menu ul{ display:none}

js为：

$('.menu').click(function(){

    $(this).find('ul').slideToggle()

)}

折叠是一种样式的呈现方式，需要用css结合js来实现。

细分逻辑，就是子菜单区域的显示和隐藏，html标签中有个设置显示和隐藏的样式属性：display:none/block

通过js触发，来切换这个属性的值即可实现显示和隐藏效果了。

比如：

定义一个显示、隐藏的方法：

//隐藏

function hideSomething( elem ){

if( elem ){

elem.style.display="none"

}

}

//显示

function showSomething( elem ){

if( elem ){

elem.style.display="block"

}

}

如果你没有前端开发基础，可能有些麻烦，还需要学习一些基础内容。