vue 监听是否切屏和开启小窗的实现过程
作者:相与还 发布时间:2024-04-26 17:38:46
前言
在做自己的项目的时候有用到判断设备是否有切屏,一般用的多的地方就是考试系统,切屏我们都知道,一般可以很容易的进行监控,只不过当开启了小窗的时候,之前一直没有解决办法,而现在则通过监控切屏和小窗来教大家如何进行设置监听这两种方式。
切屏监控
方法一
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 事件
<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>
在上面的代码中,我们使用了 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;
}
}
}
};
以上代码中,我们使用checkWindowSize函数来检查当前窗口宽度,并根据该值来更新isSmallScreen变量的取值。需要注意的是,在初次渲染组件时也必须执行一次checkWindowSize函数以确保页面显示正确。
该方法相对于利用媒体查询或监控屏幕大小变化的方法而言,更加精准,但不可避免地需要操作DOM,因此
需要注意效率和性能问题
。
来源:https://blog.csdn.net/xc9711/article/details/130283328
猜你喜欢
- 在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花
- 译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容。如
- 如下所示:In [1]: import pandas as pd ...: df=pd.DataFrame({"a":[
- 本文介绍了pandas中的series数据类型详解,分享给大家,具体如下:import pandas as pdimport numpy a
- 一.基本数据类型整数:int字符串:str(注:\t等于一个tab键)布尔值: bool列表:list (元素的集合)列表用[]元祖:tup
- 一、定义字典是一系列的键-值对,键与值之间用冒号隔开,而键-值对之间用逗号隔开,其中的“键”和&am
- 类型转换和类型断言类型转换语法:Type(expression)类型断言语法为:expression.(Type)1.类型转换示例代码pac
- 某大师曾说过,像了解自己的老婆 一样了解自己管理的数据库,个人认为包含了两个方面的了解:1,在稳定性层面来说,更多的是关注高可用、读写分离、
- 一、基础知识1、MySQL-python的安装下载,然后 pip install 安装包2、python编写通用数据库程序的API规范(1)
- 大家在没有阅读本文之前先看下python的基本概念,Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。Python由Gui
- Dreamweaver中一直变色的超级链接,css+javascript实现超级链接变色,当鼠标移动到链接上时,链接的颜色不停闪烁变色。&l
- 目录前言1、背景2、模拟测试3、结论总结前言如果不是踩到坑,我估计到现在还不知道时间字段会四舍五入。1、背景通过 Java 代码获取当日最大
- 代码如下:---涂聚文 Geovin Du DECLARE @myid uniqueidentifier SET @myid =
- 在使用Python的过程中,一定是离不开数据结构的, 也就是List-列表,Tuples-元组,Dictionaries-字典。那实际应用中
- 遍历pd.Series的index和value的方法如下,python built-in list的enumerate方法不管用for i,
- 笔者认为,在创建索引时要做到三个适当,即在适当的表上、适当的列上创建适当数量的索引。虽然这可以通过一句话来概括优化的索引的基本准则,但是要做
- 本文内容速览1、绘图数据准备还是使用鸢尾花iris数据集#导入本帖要用到的库,声明如下:import matplotlib.pyplot a
- 前言上篇文章 一文掌握 Go 文件的读取操作 介绍了如何使用 Go os 包和 bufio 包里的几个函数和方法,通过案例展示如
- Python的json模块提供了一种很简单的方式来编码和解码JSON数据。 其中两个主要的函数是 json.dumps() 和 json.l
- 哪的资料都不如官方资料权威。今天总算从MSDN中择出了ASP编码问题的解决方案。下面是MSDN中的一段话。Setting @CODEPAGE