vue屏幕尺寸发生变化

当Vue应用中的屏幕尺寸发生变化时，你可以通过监听窗口的resize事件来进行相应的操作。下面是一个示例代码，演示了如何在Vue中实现屏幕尺寸变化的监听：

<template>
  <div>
    <h1 v-if="isMobile">Mobile View</h1>
    <h1 v-else>Desktop View</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
    };
  },
  mounted() {
    this.checkScreenSize(); // 初始加载时检查屏幕尺寸
    window.addEventListener('resize', this.checkScreenSize); // 监听窗口resize事件
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize); // 组件销毁前移除事件监听
  },
  methods: {
    checkScreenSize() {
      // 获取当前窗口宽度
      const screenWidth = window.innerWidth || document.documentElement.clientWidth;
      
      // 根据窗口宽度判断是否为手机视图
      this.isMobile = screenWidth < 768; // 这里以768px为分界线，你可以根据你的需求调整
      
      // 可以在这里执行其他与屏幕尺寸相关的操作
    },
  },
};
</script>

在上述代码中，我们通过监听resize事件来调用checkScreenSize方法，在该方法中获取当前窗口宽度，并根据宽度判断当前是手机视图还是桌面视图。你可以根据实际需求进行相应的处理。同时，为了避免内存泄漏，我们在组件销毁前将事件监听移除。

希望这个示例能帮助到你！如果还有其他问题，请随时提问。