vue2&vue3监听页面显示隐藏

编程迪

已于 2024-01-29 18:33:11 修改

阅读量837

点赞数 4

文章标签： vue.js javascript 前端

于 2024-01-29 18:32:02 首次发布

本文链接：https://blog.csdn.net/zd1007129657/article/details/135886720

版权

文章讲述了如何在Vue2和Vue3中使用`visibilitychange`事件监听页面显示和隐藏，以及在Vue3中的模块化设计。着重介绍了在Vue3中如何在工具类中创建和在组件中引入该功能的方法。

摘要由CSDN通过智能技术生成

vue2监听页面显示隐藏

created() {
  document.addEventListener('visibilitychange', function(e) {
    console.log('页面变化', e.target.visibilityState)
    switch (e.target.visibilityState) {
      case 'visible':
        console.log('是否验证过',this.isVerify)
        if(this.isVerify){
          this.getReward('CASH_RED_ENVELOPE');
        }
        break
      case 'hidden':
        break
    }
  })
},

vue3监听页面显示隐藏

// vue3监听页面显示隐藏 在工具类中创建方法
export const onPageShow = (callback) => {
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      console.log("监听页面显示");
      callback();
    }
    if (document.visibilityState === "hidden") {
      console.log("监听页面隐藏");
      const removeBtn = document.createElement("button");
      removeBtn.onclick = () => {
        window.removeEventListener("visibilitychange");
      };
    }
  });
};

// 在需要监听的页面引入
import { onPageShow } from "@/utils/index";

// 在onMounted同级别调用
onPageShow(async () => {
  console.log('是否验证过',isVerify.value);
  if(isVerify.value){
    luckyDrawData();
  }
});