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菜单栏自适应折叠内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了用Vue.js递归组件构建一个可折叠的树形菜单的教学内容，有兴趣的朋友跟着学习下。2017-12-12
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了Vue如何实现table表格置顶，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了vue中使用axios请求post接口,请求会发送两次原因解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
今天在写项目掉接口的时候有一个接口需要到了用户的ip地址,查了半天觉得这个方法不错,下面这篇文章主要给大家介绍了关于vue前端通过腾讯接口获取用户ip的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue 展示.md文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue组件值变化但不刷新强制组件刷新的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，非常具有实用价值，感兴趣的同学可以了解一下2017-08-08
这篇文章主要为大家详细解析了vue.js数据双向绑定原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
vue2中Print.js的使用超详细讲解（pdf、html、json、image）
项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于vue2中Print.js使用（pdf、html、json、image）的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论