如何在 Vue 中处理窗口大小调整事件

Question

要在 Vue 中处理 窗口大小调整事件 ，您有几个选择。

添加事件监听器

您可以为窗口注册一个事件监听器 resize事件使用 addEventListener()当 Vue 挂载组件时。
您还应该在卸载组件时清理事件侦听器。
这是使用 HTML 模板进行的现场演示：

const app = new Vue({
  data: () => ({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  }),
  mounted() {
    window.addEventListener('resize', this.getDimensions);
  },
  unmounted() {
    window.removeEventListener('resize', this.getDimensions);
  },
  methods: {
    getDimensions() {
      this.width = document.documentElement.clientWidth;
      this.height = document.documentElement.clientHeight;
    }
  }
})

<div>
  <p>The window width and height are respectively {{width}}, {{height}}</p>
</div>

窗口宽度和高度分别为 {{width}}, {{height}}

缺点是任何需要监听的组件 resizeevent 需要注册全局事件。
这对于一次性来说很好，但如果多个组件需要听 resize事件。 指令是一种替代方法，它使多个组件能够监听 resize事件而不访问窗口。

创建一个 Vue 指令

与 创建自定义滚动事件 ，您可以创建用于调整窗口大小的指令。

Vue.directive('resize', {
  inserted: function(el, binding) {
    const onResizeCallback = binding.value;
    window.addEventListener('resize', () => {
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      onResizeCallback({ width, height });
    })
  }
});

const app = new Vue({
  data: {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  },
  methods: {
    setDimensions: function({ width, height }) {
      this.width = width;
      this.height = height;
    }
  },
  template: `
    <div>
      <div v-resize="setDimensions">
        <p>the width and height are respectively {{width}}, {{height}} </p>
      </div>
    </div>
  `
});

这是使用 HTML 模板进行的现场演示：

<div>
  <div v-resize="setDimensions">
    <p>The window width and height are respectively {{width}}, {{height}} </p>
  </div>
</div>

窗口宽度和高度分别为 {{width}}, {{height}}