vue菜单栏自适应折叠功能示例

发布时间:2023-02-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue菜单栏自适应折叠功能示例脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

思路:我这里使用的是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菜单栏自适应折叠功能示例全部内容,希望文章能够帮你解决vue菜单栏自适应折叠功能示例所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。