vue中的window.onresize怎么使用

本篇內(nèi)容主要講解“vue中的window.onresize怎么使用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue中的window.onresize怎么使用”吧!

window.onresize的使用

說(shuō)下重點(diǎn)

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

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代碼（此處進(jìn)行模塊化開(kāi)發(fā)）

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.瀏覽器尺寸變化響應(yīng)事件

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

這里需要注意的是，onresize響應(yīng)事件處理中，獲取到的頁(yè)面尺寸參數(shù)是變更后的參數(shù)。

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

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

2.谷歌瀏覽器中

window.onresize事件默認(rèn)會(huì)執(zhí)行兩次（偶爾也會(huì)只執(zhí)行一次，網(wǎng)上大部分說(shuō)法認(rèn)為這是Chrome的bug）。

解決方法：

一般來(lái)說(shuō)推薦新建一個(gè)標(biāo)志位 延時(shí)復(fù)位控制它不讓它自己執(zhí)行第二次，代碼如下：

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

3.頁(yè)面尺寸變更事件

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

到此，相信大家對(duì)“vue中的window.onresize怎么使用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！