脚本宝典收集整理的这篇文章主要介绍了vue菜单栏自适应折叠功能示例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
思路:我这里使用的是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菜单栏自适应折叠内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的vue菜单栏自适应折叠功能示例全部内容,希望文章能够帮你解决vue菜单栏自适应折叠功能示例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。