vue 监听是否切屏和开启小窗的实现过程

export default {
  data () {
    return {
      isHidden: false // 页面是否被隐藏（初始值为false）
    };
  },
  created () {
    // 监听document visibilityState变化事件（用于监听页面是否被隐藏）
    document.addEventListener('visibilitychange', this.onVisibilityChange);
  },
  destroyed () {
    // 解除监听事件
    document.removeEventListener('visibilitychange', this.onVisibilityChange);
  },
  methods: {
    // 监听页面是否被隐藏
    onVisibilityChange () {
      this.isHidden = document.hidden;
      if (this.isHidden) { // 当前页被隐藏
        // 执行相关操作
      } else { // 当前页被打开
        // 执行相关操作
      }
    }
  }
};

export default {
  data() {
    return {
      isActive: false, // 标志页面是否处于活动状态
      isHidden: false, // 标志页面是否处于隐藏状态
    };
  },
  activated() {
    this.isActive = true;
    if (this.isHidden) {
      console.log('页面由隐藏状态切换到了活动状态');
      // TODO：执行需要在页面由隐藏状态切换到活动状态时的逻辑
    }
    this.isHidden = false;
  },
  deactivated() {
    this.isActive = false;
    if (!this.isHidden) {
      console.log('页面由活动状态切换到了隐藏状态');
      // TODO：执行需要在页面由活动状态切换到隐藏状态时的逻辑
    }
    this.isHidden = true;
  },
};

<template>
  <div>{{ status }}</div>
</template>

<script>
export default {
  data() {
    return {
      status: ''
    };
  },
  created() {
    window.addEventListener('resize', this.check);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.check);
  },
  methods: {
    check() {
      if (document.documentElement.clientHeight < window.innerHeight) {
        this.status = '开启小窗口';
      } else {
        this.status = '非小窗口';
      }
    }
  }
};
</script>

html
<template>
  <div>{{ status }}</div>
</template>

<script>
export default {
  data() {
    return {
      status: ''
    };
  },
  created() {
    window.addEventListener('resize', this.check);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.check);
  },
  methods: {
    check() {
      if (document.documentElement.clientHeight < window.innerHeight) {
        this.status = '开启小窗口';
      } else {
        this.status = '非小窗口';
      }
    }
  }
};
</script>

// 创建一个媒体查询实例
const mediaQuery = window.matchMedia('(max-width: 768px)');

// 监听媒体查询变化并执行回调函数
mediaQuery.addListener(function (mq) {
  if (mq.matches) { // 当前窗口大小满足小窗条件
    // 执行相关操作
  } else { // 当前窗口大小不满足小窗条件
    // 执行相关操作
  }
});

export default {
  data () {
    return {
      isSmallScreen: false // 是否开启小窗（初始值为false）
    };
  },
  mounted () {
    // 初次加载组件时判断初始窗口大小
    this.checkWindowSize();
  },
  methods: {
    // 检查当前窗口尺寸并根据该值更新isSmallScreen变量取值
    checkWindowSize () {
      const elementWidth = document.documentElement.clientWidth;
      if (elementWidth <= 768) {
        this.isSmallScreen = true;
      } else {
        this.isSmallScreen = false;
      }
    }
  }
};