vue菜单栏自适应折叠功能示例
更新时间：2023年01月16日 15:04:22 作者：迷路小灰灰
这篇文章主要介绍了vue菜单栏自适应折叠,我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
思路：我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开。
上篇文章给大家介绍了Vue el-menu 左侧菜单导航功能的实现 今天继续介绍vue菜单栏示例。
一、在使用了el-menu的页面下，通过watch监听宽度变化。
1.在方法里面定义
代码如下（示例）：
mounted() {
var _this = this;
window.onresize = function () {
// 定义窗口大小变更通知事件
_this.screenWidth = document.documentElement.clientWidth; //窗口宽度
};
}, 2.在watch上里面引用
代码如下（示例）：
watch: {
screenWidth: function (val) {
if (val < 1400) {
if (this.time) {
clearInterval(this.time);
}
this.time = setTimeout(() => {
this.time = null;
console.log("折叠");
}, 100);
} else {
if (this.time) {
clearInterval(this.time);
}
this.time = setTimeout(() => {
this.time = null;
console.log("展开");
}, 100);
}
},
}, 3.在data里定义变量
代码如下（示例）：
data() {
return {
screenWidth: document.documentElement.clientWidth, //屏幕宽度
time: null,
};
},二、在el-menu中定义:collapse=“isCollapse”，isCollapse为false是展开，为true是折叠
三、将isCollapse的值用仓库的值来定义，折叠和展开使用mutations来改变值
总结
例如：到此就是今天要讲的内容，本文仅仅简单介绍了el-menu的使用，element提供了大量组件，但是要怎么使用需要我们自己去发掘。更多相关vue菜单栏自适应折叠内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
默认生成的目录结构不满足我们的开发需求,所以这里需要做一些自定义改动,本文给大家分享Vue3目录调整方案,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了微信小程序使用uni-app一键获取用户信息,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue实现多页签组件的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
本文给大家带来vue项目在安卓低版本机显示空白的原因分析，根据各自需求给大家带来了两种原因分析，大家可以参考下2018-09-09
本篇开始功能模块的开发，首先完成ABP模板自带的身份认证管理模块和租户管理模块。同样的，参考ABP的Angular版本来做。2021-05-05
这篇文章主要介绍了如何测量vue应用运行时的性能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理
vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求，目前支持上下左右无缝滚动，单步滚动，及支持水平方向的手动切换功能，本节介绍，vue添加 vue-seamless-scroll实现自动无缝滚动的效果，并对应添加点击事件2023-01-01
这篇文章主要介绍了ant-design-vue时间线使用踩坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue中watch的用法汇总，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
最新评论