在 vue.js 小部件中打开多个选项卡时找出活动选项卡的方法

Posted 2023-02-22

【中文标题】在 vue.js 小部件中打开多个选项卡时找出活动选项卡的方法

【英文标题】：Ways to find out the active tab when multiple tabs are open inside a vue.js widget

【发布时间】：2019-12-01 22:24:18

【问题描述】：

我希望列出所有可能的方法来找出当在网络浏览器中打开 n 个选项卡时哪个选项卡处于活动状态。我还想确定选项卡何时更改以及何时变得模糊。

我在页面上有一个 vue.js 小部件，我想要 vue 小部件内的活动选项卡信息。我可以与 vue 小部件通信并传递信息。

网页是基于coldfusion的，也可以访问jquery。

我在 vue.js 小部件中有一个方法，该方法每分钟调用一次，并发出一个我只想在当前页面位于前台时运行的请求，即用户没有最小化浏览器或切换到另一个标签。如果用户不看它，它就毫无用处，并且可能会占用带宽和服务器。所以我不想只是在后台浪费周期。

【问题讨论】：

您能否提供指向您正在使用的特定小部件的链接？可能更容易想出解决方案。

请提及您正在使用的小部件库。这可以帮助我们更深入地研究问题。另外，请尝试提供代码 sn-ps 或将我们链接到 jsFiddle 或 codepen 中的实际代码。 :)

你不能只听窗口上的focus 和blur 事件来跟踪当前选项卡的可见性吗？

我试过 $(window).focus(function() vm_alerts.$refs.displayAlert.startHeartBack(); ); $(window).blur(function() vm_alerts.$refs.displayAlert.stopHeart(); );这不适用于所有页面。它不会检测所有页面上的焦点和模糊。它只适用于少数几个。所以我正在寻找其他选择。

您需要将上述评论添加到问题中。您还需要描述如何激活每个选项卡。最后，我敢打赌，您使用的是自定义库，而不是经过调试的第 3 方。

【参考方案1】：

FWIW，我认为该解决方案与 ColdFusion 没有任何关系。您需要从前端（javascript）确定是否存在某些条件，以便随后调用某些基于服务器的操作。

使用jQuery UI Tabs，您可以检查哪个选项卡处于活动状态：

var active = $( ".selector" ).tabs( "option", "active" );

如果您正在使用某人的 Vue.js 选项卡组件，您应该向他们索取有关如何选择活动选项卡的文档。或者，您可以发布用于在问题中创建选项卡的代码，有人可能会从中找出答案。

【讨论】：

谢谢。我使用的是我自己创建的 Vue.js 组件。

我设法将选项卡的状态从 vue 岛外部传递给 vue.js 组件，我使用 jquery 来检测选项卡是否处于活动状态。