快捷導(dǎo)航

vue菜單欄自適應(yīng)折疊功能示例

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

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

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

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("展開(kāi)");
        }, 100);
      }
    },
  },

3.在data里定義變量

代碼如下（示例）：

  data() {
    return {
      screenWidth: document.documentElement.clientWidth, //屏幕寬度
      time: null,
    };
  },

二、在el-menu中定義:collapse=“isCollapse”，isCollapse為false是展開(kāi)，為true是折疊

三、將isCollapse的值用倉(cāng)庫(kù)的值來(lái)定義，折疊和展開(kāi)使用mutations來(lái)改變值

總結(jié)

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

您可能感興趣的文章: