vue中window.onresize的使用解析

更新時間：2022年04月19日 09:28:04 作者：清虛桂意

這篇文章主要介紹了vue中window.onresize的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

window.onresize的使用

說下重點

window.onresize只能在一個組件中使用，如果多個組件調用則會出現(xiàn)覆蓋情況，所以我的解決方案是在App.vue中使用，獲取document.documentElement.clientWidth（即瀏覽器寬度）存放在vuex中，別的組件只需要用computed(計算屬性)將vuex的clientWidth獲取，然后通過watch監(jiān)聽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代碼（此處進行模塊化開發(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.瀏覽器尺寸變化響應事件

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

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

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

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

2.谷歌瀏覽器中

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

解決方法：

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

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