visibilitychange事件:当浏览器的某个标签页切换到后台,或者从后台切换到前台时,会在document上触发visibilitychange事件。
什么时候触发呢? 当用户导航到一个新的页面,改变标签页,关闭标签页,最小化或者关闭浏览器;或者移动端从浏览器换到其他的app。
实例:
html页面中给个input框
<input type="checkbox" class="main-checkbox" v-model="isChecked" />
在data中声明isChecked变量
data(){
return {
isChecked: false
}
}
在 mounted中监测浏览器页面改变状态
window.addEventListener('visibilitychange', (e) => {
//如果页面从后台切到前台时
if(document.visibilityState === 'visible'){
this.isChecked = false;
}
});