windowonresize监听 vue中window.onresize事件的使用方法详解

　　在Vue中，我们经常需要根据浏览器窗口的大小来进行响应式布局和元素调整，而window.onresize事件就是我们常用的方法之一。它能够监听浏览器窗口大小的变化，并触发相应的回调函数。在本文中我们将详细介绍Vue中如何使用window.onresize事件，以及一些注意事项和常见问题的解决办法。无论是移动端还是PC端，掌握这个事件的使用方法，都能够帮助我们更好地实现页面的自适应和用户体验的优化。接下来让我们一起来探索吧！

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 = function(){....}

这里需要注意的是，onresize响应事件处理中，获取到的页面尺寸参数是变更后的参数。

// 获取到的是变更后的页面宽度var currentWidth = document.body.clientWidth; 

如果需要使用到变更之前的参数，需要建一个全局变量保存之前的参数（并且记得在onresize事件中刷新这个全局变量保存新的参数值）。

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; //重新保存一下新宽度}

注意要分为尺寸增大和尺寸变小两个方向考虑。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

　　以上就是关于windowonresize监听的全部内容，如果你遇到了这样的现象，不妨尝试以上方法来解决，希望对你有所帮助。