vue菜單欄自適應折疊功能示例

更新時間：2023年01月16日 15:04:22 作者：迷路小灰灰

這篇文章主要介紹了vue菜單欄自適應折疊,我這里使用的是el-menu導航菜單，監(jiān)聽頁面寬度的改變，來改變導航菜單的折疊和展開，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下

一、在使用了el-menu的頁面下，通過watch監(jiān)聽寬度變化。

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來改變值

總結(jié)

例如：到此就是今天要講的內(nèi)容，本文僅僅簡單介紹了el-menu的使用，element提供了大量組件，但是要怎么使用需要我們自己去發(fā)掘。更多相關(guān)vue菜單欄自適應折疊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: