监听是否离开页面是否锁屏，里面script用vue2的官方文件代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=w, initial-scale=1.0" />
<!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes"> -->
<title>功能测试</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<center>
<h1>Vue_功能测试</h1>
<span>{{text}}</span>
</center>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
text:'Hello'
},
mounted() {
document.addEventListener("visibilitychange", this.handleVisiable);
},
destroyed() {
document.removeEventListener("visibilitychange", this.handleVisiable);
},
methods: {
handleVisiable(e) {
console.log(e.target.visibilityState);
switch (e.target.visibilityState) {
case "prerender":
console.log("网页预渲染，内容不可见");
break;
case "hidden":
console.log("内容不可见，处理后台、最小化、锁屏状态");
this.text="警告！你已经离开当前页面"
alert("警告！你已经离开当前页面");
break;
case "visible":
console.log("处于正常打开");
break;
}
},
},
});
</script>
</body>
</html>
