如何用 Vue.js 实时响应窗口大小变化？

vue.js

2024-03-22 12:16:56

用 Vue.js 实时响应窗口大小变化

问题：获取窗口大小的挑战

作为 Vue.js 初学者，实时获取窗口大小并根据其变化进行响应可能是一项令人生畏的任务。特别是，使用 watch 属性可能会产生不佳的效果。

解决方案：使用 `methods` 和 `mounted` 钩子

为了解决这个问题，我们将探索两种有效的解决方案：使用 methods 和 mounted 生命周期钩子。

1. 使用 methods

在 Vue 实例中，我们在 methods 对象中定义一个名为 elem 的方法：

methods: {
  elem() {
    this.size = window.innerWidth;
    return this.size;
  },
}

此方法获取窗口的内部宽度并将它存储在 size 数据属性中。通过调用 elem 方法，你可以在任何时候检索当前窗口大小。

2. 使用 mounted 生命周期钩子

mounted 钩子在 Vue 实例被挂载到 DOM 时触发。这正是我们想要获取窗口大小的时候。在 mounted 钩子中，我们可以调用 elem 方法并检查窗口大小：

mounted() {
  this.elem();
  if (this.elem() < 767) { // 执行特定代码 }
}

如果窗口宽度小于 767 像素，我们执行某些特定代码。你可以根据需要添加其他条件语句来响应不同窗口大小。

示例代码

以下代码示例展示了如何将这两种方法结合使用：

<template>
  <div>窗口宽度：{{ size }}</div>
</template>

<script>
export default {
  data() {
    return {
      size: 0,
    };
  },
  methods: {
    elem() {
      this.size = window.innerWidth;
      return this.size;
    },
  },
  mounted() {
    this.elem();
    if (this.elem() < 767) { // 执行特定代码 }
  },
};
</script>