window.onresize

Vue 中可以使用 $nextTick() 函数来在窗口大小改变时执行代码。例如：

mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.$nextTick(() => {
      // 在这里执行代码
    });
  }
}

也可以使用vue-resize这个库来监听窗口变化。

import Vue from 'vue'
import VueResize from 'vue-resize'

Vue.use(VueResize)

然后可以在template中绑定事件

<vue-resize @resize="onResize"></vue-resize>

在methods中定义onResize就可以了

methods: {
    onResize(event) {
    console.log(event)
  }
}

相关问题

window.onresize和resize

`window.onresize` 和 `resize` 事件都是在窗口大小改变时触发的事件，但是它们有一些区别。

`window.onresize` 是 `window` 对象的一个属性，它表示在窗口大小改变时需要执行的处理函数。可以使用 `window.onresize` 属性来添加或删除事件处理函数，例如：

window.onresize = function() {
  // 窗口大小改变时执行的代码
}

`resize` 事件是 `Window` 对象的一个事件，它表示窗口大小改变时触发的事件。可以使用 `window.addEventListener` 方法来添加或删除 `resize` 事件的处理函数，例如：

window.addEventListener('resize', function() {
  // 窗口大小改变时执行的代码
})

相比之下，使用 `addEventListener` 方法添加事件处理函数可以多次添加不同的处理函数，而使用 `onresize` 属性只能设置一个处理函数，并且最后设置的函数会覆盖之前设置的函数。

window.onresize=function()

以下是两个关于window.onresize=function()的例子：

1. 引用中的例子是在窗口大小改变时触发两个函数的执行。第一个函数会弹出一个警告框显示"abc"，而第二个函数会弹出一个警告框显示"error"。这意味着当窗口大小改变时，会先执行第一个函数，然后再执行第二个函数。

$(function() {
  window.onresize = function() {
    alert("abc");
  };
  window.onresize = function() {
    alert("error");
  };
})

2. 引用中的例子是在窗口大小改变时触发一个函数的执行，并且在函数内部使用setTimeout函数设置了一个延时100毫秒后执行的函数。这意味着当窗口大小改变时，会执行一个函数，然后在100毫秒后执行另一个函数。

$(function() {
  window.onresize = function() {
    setTimeout(function(){
      alert("延时100ms执行");
    }, 100);
  };
})