vue 监听是否切屏和开启小窗

相与还

已于 2023-04-21 15:52:27 修改

阅读量2.5k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-04-21 13:48:05 首次发布

本文链接：https://blog.csdn.net/xc9711/article/details/130283328

版权

前言

在做自己的项目的时候有用到判断设备是否有切屏，一般用的多的地方就是考试系统，切屏我们都知道，一般可以很容易的进行监控，只不过当开启了小窗的时候，之前一直没有解决办法，而现在则通过监控切屏和小窗来教大家如何进行设置监听这两种方式。

切屏监控

方法一

Vue框架提供了一个$hidden属性，可以用来判断当前页面是否被隐藏（如在后台标签页）。以下是具体代码：

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 { // 当前页被打开
        // 执行相关操作
      }
    }
  }
};

以上代码在Vue组件中，利用$hidden属性来判断当前页面是否被隐藏，并根据该取值来执行相应操作。需要注意的是，在关闭组件前必须解除监听事件以避免内存泄漏。

方法二

可以利用Vue的activated和deactivated生命周期函数来实现判断页面是否因为切换而隐藏。

具体代码如下：

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;
  },
};

在代码中，我们定义了两个变量isActive和isHidden，分别代表页面是否处于活动和隐藏状态。

当activated生命周期函数被触发时，我们将isActive设置为true，并且如果此时页面之前处于隐藏状态，则说明页面是因为切换而隐藏的，此时我们可以执行一些需要在页面由隐藏状态切换到活动状态时的逻辑。

同理，当deactivated生命周期函数被触发时，我们将isActive设置为false，并且如果此时页面之前处于活动状态，则说明页面是因为切换而隐藏的，此时我们可以执行一些需要在页面由活动状态切换到隐藏状态时的逻辑。

同时，我们还需要根据activated和deactivated生命周期函数的调用顺序来设置isHidden的值，以便准确标志页面是否处于隐藏状态。

小窗监控

方法一

一开始我是没有头绪的，但是现在实际上是可以通过监听视窗和实际窗口比较大小，如果一直说明没有变成小窗，否则说明开启了小窗，那么就可以通过监控它来添加我们需要的逻辑。

Vue 本身并没有直接提供监测设备是否开启小窗口的 API，但可以通过 JavaScript 监听 window 对象的 resize 事件变化并通过 document.documentElement.clientHeight 和 document.documentElement.clientWidth 获取当前视口宽高，进而推断出设备是否开启小窗口。

具体的实现方法如下：

在 Vue 组件中监听 resize 事件

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>

在上面的代码中，我们使用了 window 对象的 resize 事件，并在组件创建时添加该监听器。check() 方法会在触发 resize 前后检查视口大小并输出结果。

根据视口大小是否变化判断设备状态
在上述 check() 方法中，我们使用了一些计算方式来判断设备状态。主要思路是通过比较视口高度和 window 高度的大小，如果视口高度小于 window 高度，则认为设备处于小窗口模式，否则为非小窗口模式。

总之，这是一种可行的方式来检测设备是否开启小窗口，但需要注意的是，不同的设备及浏览器可能会有不同的反应速度，因此我们需要在具体情况中进行适当的测试和调整。

方法二

除了以上方法，还可以通过matchMedia进行查询
以下代码是利用媒体查询（Media Query）来判断是否开启小窗的方法，与Vue框架无关：

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

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

以上代码中，我们使用matchMedia方法来创建一个媒体查询实例，并将小窗条件作为参数传入。之后，通过addListener方法来监听该实例的变化，根据当前窗口大小是否满足小窗条件来执行相应操作。

需要注意的是，在使用该方法时，必须保证所设置的媒体查询条件与CSS样式表中所定义的一致，否则可能导致判断出错。

方法三

还可以通过操作DOM元素判断是否开启小窗，
以下代码是通过检测DOM元素宽度来判断是否开启小窗的方法：

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;
      }
    }
  }
};