目录一、在使用了el-menu的页面下，通过watch监听宽度变化。1.在方法里面定义2.在watch上里面引用3.在data里定义变量二、在el-menu中定义:collapse=
思路：我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开。
上篇文章给大家介绍了Vue el-menu 左侧菜单导航功能的实现 今天继续介绍vue菜单栏示例。
代码如下（示例）：
mounted() {
var _this = this;
window.onresize = function () {
// 定义窗口大小变更通知事件
_this.screenWidth = document.documentElement.clientWidth; //窗口宽度
};
}, 代码如下（示例）：
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);
}
},
}, 代码如下（示例）：
data() {
return {
screenWidth: document.documentElement.clientWidth, //屏幕宽度
time: null,
};
},例如：到此就是今天要讲的内容，本文仅仅简单介绍了el-menu的使用，element提供了大量组件，但是要怎么使用需要我们自己去发掘。更多相关vue菜单栏自适应折叠内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: vue菜单栏自适应折叠功能示例
本文链接: https://lsjlt.com/news/177916.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0