visibilitychange event: When a tab of the browser switches to the background, or switches from the background to the foreground, the visibilitychange event will be triggered on the document.
When is it triggered? When the user navigates to a new page, changes tabs, closes tabs, minimizes or closes the browser; or switches from the browser to other apps on the mobile side.
Example:
Give an input box in the html page
<input type="checkbox" class="main-checkbox" v-model="isChecked" />Declare the isChecked variable in data
data(){
return {
isChecked: false
}
}Monitor browser page change status in mounted
window.addEventListener('visibilitychange', (e) => {
//如果页面从后台切到前台时
if(document.visibilityState === 'visible'){
this.isChecked = false;
}
});