文章目录

• 前言
• 一、制作开关按键
• 二、菜单栏控制
• 三、数据与事件逻辑控制
• 四、效果展示
• 总结
• 参考链接

前言

Element-ui官网导航菜单栏中,有折叠类型的导航栏选项，效果如下

项目图如下：

一、制作开关按键

:class="collapseBtnClass"为图标样式，点击的时候触发事件名称为collapse，二者都在数据与事件逻辑中控制。

 <div style="flex: 1; font-size: 20px" ><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div>

二、菜单栏控制

:width="sideWidth+'px'"用来控制侧边栏大小。

<el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%;">

:collapse-transition="false" 是关闭折叠时的动画，要不然折叠时字是一个个消失的。
:collapse属性是“是否水平折叠收起菜单”，下面默认数据为false。

<el-menu :default-openeds="['1', '3']" style="height: 100%"background-color="rgb(48,65,86)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"
>

element-ui官网也有说明。

导航字段要与图标分开，才能在折叠时只展示图标、不展示字段。

<template slot="title"><i class="el-icon-message"></i><span slot="title">导航一</span>
</template>
//...
<template slot="title"><i class="el-icon-menu"></i><span slot="title">导航二</span>
</template>
//...
<template slot="title"><i class="el-icon-menu"></i><span slot="title">导航二</span>
</template>

左上角名称与图标的处理，名称绑定了v-show="logoTextShow"，在折叠时不展示。

 <img src="../assets/logo.png" style="width: 20px; position: relative; top: 5px; margin-right: 5px"><b style="color: white" v-show="logoTextShow">ML后台管理系统</b>

三、数据与事件逻辑控制

export default {name: //...,data() {const item = {//...};return {tableData: //...,//默认图标为"el-icon-s-fold"collapseBtnClass: "el-icon-s-fold",//菜单默认不折叠isCollapse: false,//默认宽度200sideWidth: 200,logoTextShow: true,}},methods:{//点击收缩按钮触发collapse(){//collapse为false时展开，为true时折叠。this.isCollapse = !this.isCollapse//折叠时if(this.isCollapse){//折叠时宽度为64this.sideWidth = 64//变换图标样式this.collapseBtnClass = 'el-icon-s-unfold'//折叠时不展示名称“ML后台管理系统”this.logoTextShow = false//展开时}else{//展开时宽度为200this.sideWidth = 200//变换图标样式this.collapseBtnClass = 'el-icon-s-fold'//展开时展示名称“ML后台管理系统”this.logoTextShow = true}}}
}

四、效果展示

总结

折叠能使项目功能展示更饱满，处理好事件控制逻辑，就能很好的应用菜单栏的折叠和展开效果。

参考链接

• 从0开始带你手撸一套SpringBoot+Vue后台管理系统（2022年最新版）
• 【VUE项目实战】19、实现侧边栏折叠与展开功能

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！