vue菜单栏自适应折叠功能示例
短信预约 -IT技能 免费直播动态提醒
思路：我这里使用的是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菜单栏自适应折叠内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
