Vuejs：当特定选项卡处于活动状态时是不是会发出事件（bootstrap-vue）

Posted 2023-02-23

【中文标题】Vuejs：当特定选项卡处于活动状态时是不是会发出事件（bootstrap-vue）

【英文标题】：Vuejs : Is there a event emitted when a particular tab gets active ( boostrap-vue )Vuejs：当特定选项卡处于活动状态时是否会发出事件（bootstrap-vue）

【发布时间】：2020-09-19 09:10:10

【问题描述】：

我想在特定 b-tab 处于活动状态时显示和隐藏一个 div（我页面中的一个部分），并在它不活动时关闭它（使用 2 种方法实现打开和关闭 - forceOpenSettings 和 forceCloseSettings）。当特定选项卡处于活动状态时是否会发出事件。这样我就可以将其链接到这些方法。当我检查 bootstrap-vue 文档时，我找不到任何东西。我找到的最接近的是这个 - https://bootstrap-vue.org/docs/components/tabs#programmatically-activating-and-deactivating-tabs

尝试像这样使用本节中解释的激活和停用，但它不起作用

<b-tab title="User Table" @activate="forceOpenSettings" @deactivate="forceCloseSettings"></b-tab>

工作正常时的情况

同样的事情在这里工作正常。我想打开和关闭同一个 div，但这次是基于 b-collapse。在 b-collapse 的 bootstrap-vue 文档中，我可以找到 @hide 和 @show 事件发射器 - https://bootstrap-vue.org/docs/components/collapse#comp-ref-b-collapse-events。尝试使用它，它工作正常。我想要的是一个类似于选项卡处于活动状态和非活动状态时的事件发射器。

<b-collapse role="tabpanel" @show="forceOpenSettings" @hide="forceCloseSettings"></b-collpase>

NB - 显示和隐藏的部分是页面中的另一个部分，不是 b-tabs 或 b-collapse 的子部分。我只想根据此选项卡打开和关闭该 div 并折叠。合拢工作正常，但选项卡不行。

如果没有事件发射器，也许我应该编写一个方法来实现这一点。但如果 Vuejs 有一些事件发射器来实现这一点，那就太好了。

【参考方案1】：

文档中提到的所有事件都需要知道标签的索引才能确定它是否被激活。 B-tab 也会发出一个点击事件。像这样工作正常

<b-tab :title="title" @click="yourMethodHere()">
 content 
</b-tab>

【参考方案2】：

试试这样的：

<b-tabs @input="onTabChange" ...
...
methods: 
  onTabChange () 
    // tab is changed!