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

时间:2023-02-03 迷路小灰灰人气:0

思路：我这里使用的是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菜单栏自适应折叠内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

加载全部内容