记一次A标签页”调“用B标签页中的方法_怎么自动点击b标签-CSDN博客

本文链接：https://blog.csdn.net/Z2564663790/article/details/129370799

在一次开发中，需求是：A标签页填完数据，点击保存按钮，然后B标签页中的数据会刷新。

这在单页面项目中很好实现，可这是两个标签页，笔者想不到该怎么做，这时同事和笔者说，这种是做不到的，它们是不同的页面，所以不能操作，但是，我们可以换一种思路，我们采取监听的方式：

当我们在编辑A标签页时,当前页面是属于激活状态的，别的标签页是隐藏状态，当我们保存了A标签页中的信息，然后切到B标签页，则B标签页处于激活的状态，所以我们可以采用下面的方法

// 新建一个.ts文件，比如page-active.ts

// 监听页面显示隐藏
export const useVisibility = (showCb: any, hideCb?: any) => {
  let hidden: string = "";
  let state: string = "";
  let visibilityChange: string = "";
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    state = "visibilityState";
  } else if (typeof (document as any).mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState";
  } else if (typeof (document as any).msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState";
  } else if (typeof (document as any).webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
  }

  let cb = function () {
    if ((document as any)[state] == hidden) {
      hideCb && hideCb();
    } else {
      showCb && showCb();
    }
  };

  // 移除并开启监听
  document.removeEventListener(visibilityChange, cb, false);
  document.addEventListener(visibilityChange, cb, false);
};

然后我们在B标签页中写下如下代码

import { useVisibility } from '@/utils/page-active'

useVisibility(() => {
  // 此处写刷新B页面的方法
})

这样就可以做到A标签页”调用“B标签页的方法了

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！

如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！