前言

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

切屏监控

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 本身并没有直接提供监测设备是否开启小窗口的 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 高度，则认为设备处于小窗口模式，否则为非小窗口模式。

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

结语

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