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"

}

}

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