Example of adaptive folding function of vue menu bar

Idea: I am using the el-menu navigation menu here to monitor the changes in page width to change the collapse and expansion of the navigation menu.

The previous article introduced it to youImplementation of the left menu navigation functionToday we will continue to introduce the vue menu bar example.

1. On the page that uses el-menu, listen for width changes through watch.

1. Define it in the method

The code is as follows (example):

mounted() {  
  var _this = this;  
   = function () {  
    // Define window size change notification event   _this.screenWidth = ; //Window width  };  
},  

2. Quote on the watch

The code is as follows (example):

  watch: {
    screenWidth: function (val) {
      if (val < 1400) {
        if () {
          clearInterval();
        }
         = setTimeout(() => {
           = null;
          ("fold");
        }, 100);
      } else {
        if () {
          clearInterval();
        }
         = setTimeout(() => {
           = null;
          ("Expand");
        }, 100);
      }
    },
  }, 

3. Define variables in data

The code is as follows (example):

  data() {
    return {
      screenWidth: , //Screen Width      time: null,
    };
  },

2. Definition in el-menu: collapse = "isCollapse", isCollapse is false, is expand, and true is collapse

3. Define the value of isCollapse with the value of the warehouse, collapse and expand using mutations to change the value

Summarize

For example: That's what we are going to talk about today. This article only briefly introduces the use of el-menu. Element provides a large number of components, but we need to discover how to use it ourselves. For more related adaptive folding content of the vue menu bar, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!