vue中的window.onresize怎么使用

本篇內容主要講解“vue中的window.onresize怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中的window.onresize怎么使用”吧!

window.onresize的使用

說下重點

window.onresize只能在一個組件中使用，如果多個組件調用則會出現覆蓋情況，所以我的解決方案是在App.vue中使用，獲取document.documentElement.clientWidth（即瀏覽器寬度）存放在vuex中，別的組件只需要用computed(計算屬性)將vuex的clientWidth獲取，然后通過watch監聽clientWidth的值，即可觸發組件事件

App.vue代碼

<script>
export default {
  name: 'app',
  mounted () {
    window.onresize = () => {
      this.clientWidthResize()
    }
  },
  methods: {
    clientWidthResize () {
      this.$store.commit('Tool/resizeWidth', Number(document.documentElement.clientWidth))
    }
  }
}
</script>

store中tool.js代碼（此處進行模塊化開發）

export default {
  namespaced: true,
  state: {
    clientWidth: 0
  },
  getters: {},
  mutations: {
    resizeWidth(state, clientWidth) {
      state.clientWidth = clientWidth;
    },
  },
  actions: {},
}

組件使用

computed: {
  clientWidth () {
    return this.$store.state.Tool.clientWidth || Number(document.documentElement.clientWidth)
  }
},
watch: {
  clientWidth (val) {
    console.log(val)
  }
},

window.onresize筆記

1.瀏覽器尺寸變化響應事件

 window.onresize = function(){....}

這里需要注意的是，onresize響應事件處理中，獲取到的頁面尺寸參數是變更后的參數。

// 獲取到的是變更后的頁面寬度
var currentWidth = document.body.clientWidth;

如果需要使用到變更之前的參數，需要建一個全局變量保存之前的參數（并且記得在onresize事件中刷新這個全局變量保存新的參數值）。

2.谷歌瀏覽器中

window.onresize事件默認會執行兩次（偶爾也會只執行一次，網上大部分說法認為這是Chrome的bug）。

解決方法：

一般來說推薦新建一個標志位 延時復位控制它不讓它自己執行第二次，代碼如下：

var firstOnResizeFire = true;//谷歌瀏覽器onresize事件會執行2次，這里加個標志位控制
 
window.onresize = function()
{
 if (firstOnResizeFire) {
  NfLayout.tabScrollerMenuAdjust(homePageWidth);
  firstOnResizeFire = false;
  
  //0.5秒之后將標志位重置（Chrome的window.onresize默認執行兩次）
  setTimeout(function() {
   firstOnResizeFire = true;
        }, 500);
 } 
 homePageWidth = document.body.clientWidth; //重新保存一下新寬度
}

3.頁面尺寸變更事件

注意要分為尺寸增大和尺寸變小兩個方向考慮。

到此，相信大家對“vue中的window.onresize怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！