vue—菜单栏自适应折叠

vue—菜单栏自适应折叠

思路：我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开。

---

---

一、在使用了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提供了大量组件，但是要怎么使用需要我们自己去发掘。