在vue 项目中，如何判断屏幕的宽高

在vue2 项目中，如何判断屏幕的宽高

在 Vue 2 项目中，你可以使用原生的 JavaScript 来获取屏幕的宽度和高度，并且可以通过监听窗口的 resize 事件来响应屏幕尺寸的变化。

下面是一个简单的例子，展示了如何在 Vue 组件中实现这一点：

<template>
  <div>
    <!-- 这里是你的模板代码 -->
    <p>Screen Width: {{ screenWidth }}px</p>
    <p>Screen Height: {{ screenHeight }}px</p>
  </div>
</template>

<script>
export default {
data() {
    return {
      screenWidth: window.innerWidth, // 初始屏幕宽度
      screenHeight: window.innerHeight// 初始屏幕高度
    };
  },
mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.updateDimensions);
  },
beforeDestroy() {
    // 组件销毁前移除监听器
    window.removeEventListener('resize', this.updateDimensions);
  },
methods: {
    updateDimensions() {
      // 更新屏幕宽高
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    }
  }
};
</script>

这个组件做了以下几件事：

1. 1. 在 data 函数中定义了两个属性 screenWidth 和 screenHeight，用于存储当前的屏幕宽度和高度。
2. 2. 在 mounted 生命周期钩子中添加了一个监听器，当窗口大小发生变化时调用 updateDimensions 方法更新数据。
3. 3. 定义了 updateDimensions 方法，它会更新组件的数据以反映新的屏幕尺寸。
4. 4. 在 beforeDestroy 生命周期钩子中移除了事件监听器，防止内存泄漏。

这样，每当用户调整浏览器窗口大小时，Vue 组件都会自动更新显示的宽度和高度。

如果你需要在其他地方使用这些尺寸值，你也可以将它们作为计算属性或通过 Vuex 状态管理库共享给其他组件。