以 Nuxt 获取客户端窗口大小

如果你需要在 Nuxt 应用程序中获取客户端窗口大小，你可以使用以下代码片段。

export default {
  methods: {
    getWindowDimensions() {
      if (process.client) {
        const { height, width } = window.screen;
        return { height, width };
      }
      return null;
    }
  }
}

上述代码获取了屏幕的高度和宽度，并返回了一个包含这些值的对象。

你可以在组件中调用这个方法，然后将结果保存在数据中，以供你在模板中使用。

<template>
  <div>
    {{ windowDimensions }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowDimensions: {}
    }
  },
  mounted() {
    this.windowDimensions = this.getWindowDimensions();
  },
  methods: {
    getWindowDimensions() {
      if (process.client) {
        const { height, width } = window.screen;
        return { height, width };
      }
      return null;
    }
  }
}
</script>

在这个例子中，我们在组件的 mounted() 生命周期钩子中调用 getWindowDimensions() 方法，并将结果保存在我们的组件数据对象中。

接下来，我们在模板中使用 windowDimensions 数据对象来显示屏幕的高度和宽度。由于数据对象是响应式的，因此它将在窗口大小改变时自动更新。

这是一个简单的方法来获取客户端窗口大小。你可以使用这个值来做一些有趣的事情，比如计算一些布局或样式。