vue2左侧菜单栏收缩展开功能

目录

1. Main.vue页面代码

a. 修改侧边栏属性

b. 修改头部导航栏

c. 定义我们的变量

d. collapse函数

2. Header.vue页面代码

3. Aside.vue页面代码


vue2左侧菜单栏收缩展开目前是非常常见的,我们在日常开发过程中经常会碰到。这一小节我们就详细了解一下这个功能,完善我们的项目开发。

首先,修改Main.vue页面中的一些属性,有些属性需要动态绑定。接下来我们来一步一步实现。

1. Main.vue页面代码

a. 修改侧边栏属性

我们给我们导入的Aside组件动态绑定一个isCollapse。然后再下面的方法中定义

logoTextShow是我们动态绑定的系统名称:当我们点击收缩菜单时,系统名称会隐藏,展示我们的系统图标。

下面是效果展示:

<!--其它代码--><!-- 侧边栏 -->
<el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);height: 100%"><Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
</el-aside><!--其它代码-->

b. 修改头部导航栏

头部导航栏是我们点击收缩展开按钮的地方,我们在这里动态绑定点击函数。collapse函数就是我们动态绑定的函数。

<!--其它代码--><!-- 头部导航栏 -->
<el-header style="border-bottom: 1px solid #ccc;"><Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
</el-header><!--其它代码-->

c. 定义我们的变量

我们在return中定义我们的collapseBtnClass图标变量;

定义Aside.vue中的sidewidth左侧菜单栏宽度

还有默认展示我们的系统名称而不是展示logo图片

<!--其它代码-->
data () {return {collapseBtnClass: 'el-icon-s-fold',isCollapse: false,sideWidth: 220,logoTextShow: true}
},
<!--其它代码-->

d. collapse函数

这里我们函数的逻辑是:

当我们点击收缩菜单图标时,isCollapse变量为flase;

当我们的isCollapse变量为false时,this.sidewidth宽度为64,图标设置为收缩图标

然后我们的系统名称隐藏;

相反:我们的菜单宽度为220;设置展开图标,系统名称菜单展示

<!--其它代码-->
methods: {collapse () {this.isCollapse = !this.isCollapseif (this.isCollapse) {this.sideWidth = 64this.collapseBtnClass = 'el-icon-s-unfold'this.logoTextShow = false} else {this.sideWidth = 220this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}}
}
<!--其它代码-->

2. Header.vue页面代码

首先在我们面包屑上面加一个span标签:

绑定我们的class为collapseBtnClass:

设置一个点击事件:collapse

<!--其它代码-->
<span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>
<!--其它代码-->

这里牵扯到一个父子传值和子子传值。父子传值我们在子组件里面接收就要用props来接收

<!--其它代码-->
props: {collapseBtnClass: String,collapse: Function
}
<!--其它代码-->

3. Aside.vue页面代码

我们在标签<el-menu>绑定我们的属性:

<el-menu:default-openeds="[]" style="min-height: 100%; overflow-x: hidden"background-color="#1f2d3d"text-color="#fff"default-active="/home"active-text-color="rgb(75 175 255)":collapse-transition="false":collapse="isCollapse"router>

系统名称给一个v-show事件

<div style="height: 60px; line-height: 60px; text-align: center"><img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 2px;"><b style="color: white" v-show="logoTextShow">仓库管理系统</b>
</div>

然后我们在下面接收父组件传递的值:

<!--其它代码-->
props: {isCollapse: Boolean,logoTextShow: Boolean
}
<!--其它代码-->

现在会有一个问题,我们点击收缩菜单栏时菜单文字会有遗留,我们给一个样式来隐藏文字

<style>
.el-menu-item.is-active {background-color: rgb(38, 52, 69) !important;
}
.el-menu-item:hover {background-color: rgb(38, 52, 69) !important;
}.el-submenu__title:hover {background-color: rgb(38, 52, 69) !important;
}
/*解决收缩菜单文字不消失问题*/
.el-menu--collapse span {visibility: hidden;
}
</style>

以上就是我们的菜单栏收缩展开全部教程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/4816.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用PHPMyAdmin进行数据库备份

本周有一个客户&#xff0c;购买Hostease的虚拟主机&#xff0c;询问我们的在线客服&#xff0c;如何使用PHPMyAdmin进行数据库备份。我们为用户提供教程&#xff0c;用户很快完成了设置。在此&#xff0c;我们分享这个操作教程&#xff0c;希望可以对您有帮助。 它适用于安装P…

笔试刷题-Day10

牛客 一、DP30买卖股票的最好时机&#xff08;一&#xff09; 算法&#xff1a;虽然题目标了DP但是用贪心更快页更容易理解 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Sca…

动态规划-子序列问题1

文章目录 1. 最长递增子序列&#xff08;300&#xff09;2. 摆动序列&#xff08;376&#xff09;3. 最长递增子序列的个数&#xff08;673&#xff09;4. 最长数对链&#xff08;646&#xff09; 1. 最长递增子序列&#xff08;300&#xff09; 题目描述&#xff1a; 状态表…

气血足不足主要看看两个部位这些补气血的调理方法帮到您

气血足不足&#xff0c;关键看这两处&#xff1a;1、观耳识气血&#xff1a;红润饱满&#xff0c;弹性十足&#xff0c;这便是气血旺盛的直观表现。然而&#xff0c;随着年龄的增长&#xff0c;许多人会发现耳朵逐渐松弛、出现皱纹&#xff0c;这往往暗示着气血的流失。这里有个…

电路邱关源学习笔记——3.5回路电流法

1.回路电流法 以基本回路中沿回路连续流动的假想电流为未知量列写电路方程分析电路的方法。它适用于平面和非平面电路。 列写的方程 回路电流法是对独立回路列写KVL方程&#xff0c;方程数为&#xff1a;b-n1 注意&#xff1a;与支路电流法相比&#xff0c;方程数减少了n-1个…

机器人操作系统ROS2学习—编译工作空间colcon build报错问题

在ROS2中&#xff0c;工作空间创建完成后&#xff0c;会经常需要编译工作空间。在工作空间dev_ws 下打开一个终端&#xff0c;通过指令Colcon build来编译工作空间。 1、这个过程有可能会出现如下错误: "colconbuild:Duplicate package names not supported" 根据…

实现堆的各种基本运算的算法(数据结构)

以小堆为例&#xff0c;大堆就举一反三了。 堆的物理结构就是普通的数组&#xff0c;但是逻辑结构看成了一颗完全二叉树。 小堆&#xff0c;就是树的每一个父节点都小于他的孩子节点。如图中第一排的a与b。大堆&#xff0c;就是树的每一个父节点都大于他的孩子节点。如图中第…

DBA-现在应该刚刚入门吧

说来话长 在2023年以前&#xff0c;我的DBA生涯都是“孤独的”。成长路径除了毕业前的实习期有人带&#xff0c;后续几乎都是靠自学。如何自学&#xff0c;看视频、看文档、网上查阅资料、项目实战。 可能是学疏才浅 &#xff0c;一直都是在中小公司混&#xff0c;在中小公司通…

为什么本国货币的贬值会导致本国物价的上涨

本国货币贬值意味着其对外国货币的汇率下降&#xff0c;也就是说&#xff0c;同样数量的本国货币现在能兑换的外国货币减少了。这种情况下&#xff0c;本国货币的购买力相对于外国货币减弱了。本国货币贬值可能导致本国物价上涨的几个原因&#xff1a; 进口成本上升&#xff1a…

德思特手持式频谱分析仪加速公共无线事业的运行

一、公共无线事业中无线电的重要性 提起无线电&#xff0c;许多人或许觉得这是非常老旧的观念。实际上&#xff0c;无线电在我们的生活中占据着非常重要的地位。当前&#xff0c;无线电早已成为受众最广泛的大众媒介。据工业和信息化部资料显示&#xff0c;全球95%的人口都可以…

【MATLAB源码-第195期】基于matlab的OFDM,UFMC,FBMC三种通信系统误码率对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 OFDM&#xff08;正交频分复用&#xff09;、UFMC&#xff08;通用频率分割复用&#xff09;、FBMC&#xff08;滤波器组多载波&#xff09;是目前无线通信领域中使用较广的几种多载波调制技术。随着无线通信技术的飞速发展&…

STM32学习和实践笔记(23):PWM输出的配置

PWM可以看作是定时器功能中其中一个子功能&#xff0c;配置步骤与前面定时器的方式类似。相关库函数也同样在tim.c里。 3.PWM输出配置步骤 &#xff08;1&#xff09;使能定时器及端口时钟&#xff0c;并设置引脚复用器映射。 a) RCC_APB1PeriphClockCmd(RCC_APB1Pe…

举个栗子!Tableau 技巧(272):学做曲线面积图(Sigmoid area charts)

曲线面积图&#xff08;Sigmoid area charts&#xff09;是区域图的一种创新变形&#xff0c;呈现数据随时间变化的情况&#xff0c;也可用于对数据总值趋势的洞察。 如何在 Tableau 中具体实现呢&#xff1f;今天的栗子&#xff0c;一睹为快吧&#xff01; 本期《举个栗子》…

HTML学习笔记(二)

1.HTML图像 图像标签&#xff08;<img>)和源属性&#xff08;src&#xff09; HTML中&#xff0c;图像由<img>标签来定义&#xff0c;<img>是空标签&#xff0c;只包含属性&#xff0c;没有闭合标签。在页面上显示图像需要使用源属性&#xff08;src),src是指…

机器人系统ros2-开发实践03-监听节点的参数变化(C++)

背景&#xff1a; 通常&#xff0c;节点需要响应其自身参数或另一个节点参数的更改。 ParameterEventHandler 类可以轻松侦听参数更改&#xff0c;以便您的代码可以响应它们。本教程将向您展示如何使用 ParameterEventHandler 类的 C 版本来监视节点自身参数的更改以及另一个节…

Linux系统安全与应用【一】

目录 1.账号安全控制 1.1 系统账号清理 1.2 密码安全控制 1.3 命令历史限制 1.4 命令总结 2.系统引导和登录控制 2.1 使用su命令切换用户 2.2 限制使用su命令的用户 3.可插拔式认证模块PAM 3.1 linux中的PAM安全认证 3.2 PAM认证原理​编辑 3.3 PAM认证的构成 3.4 P…

itables, Python 大型数据集显示工具

目录 前言 安装 特性 基本功能 显示表格 排序功能 搜索功能 分页显示 高级功能 自定义列的显示格式 高级搜索功能 实现数据的动态更新 集成外部JavaScript库 总结 前言 iTables库是Python中一个强大的工具&#xff0c;专门用于在Jupyter Notebook和其他IPython环境中以交…

Leetcode—1329. 将矩阵按对角线排序【中等】(unordered_map、priority_queue)

2024每日刷题&#xff08;121&#xff09; Leetcode—1329. 将矩阵按对角线排序 实现代码 class Solution { public:vector<vector<int>> diagonalSort(vector<vector<int>>& mat) {const int m mat.size();const int n mat[0].size();unorder…

R语言--图形绘制

一&#xff0c;绘制简单图形 c1<- c(10,20,30,40,50) c2<-c(2,7,15,40,50) plot(c1,c2,typeb) 具体参数请参考R语言中的绘图技巧1&#xff1a;plot()函数参数汇总_r语言plot参数设置-CSDN博客 c1<- c(10,20,30,40,50) c2<-c(2,7,15,40,50) plot(c1,c2,typeb,col#…

这些小众工作软件让你事半功倍

大家好&#xff0c;我是追求高效工作的小红书种草小能手&#xff01;今天要和大家分享几款超实用的工作软件&#xff0c;它们可能不像那些大牌软件那样家喻户晓&#xff0c;但绝对能让你的工作生活焕然一新&#xff01;&#x1f31f; 1️⃣《亿可达》- &#x1f5a5;️自动化办…