如果 parent 标签包含 active class - Vue Bootstrap 则有条件地显示不同的组件

Question

我想在 Vue 上自定义选项卡组件的标题部分 Bootstrap。如果选项卡处于活动状态，我想显示不同类型的选项卡项。当然我们可以通过设置.activeclass使用cssclasses来解决。但在我的情况下，如果该选项卡处于活动状态，我想显示不同的组件。

我相信这可以使用 'v-if' 来完成，但我不知道如何让其标签的 classes 包含活动的 class。如果选项卡处于活动状态，我想呈现一个微调器组件，否则我只想呈现该选项卡的名称。

你有什么想法吗？

<b-tabs fill>  
        <b-tab title="First">
            <template #title v-if="active">
                <b-spinner type="grow" small variant="success"></b-spinner> <b>Active Title</b>
            </template>
            <template #title v-else> 
                <b>Title</b>
            </template>
        </b-tab>
        <b-tab title="Second">
            <template #title v-if="active"> 
                <b-spinner type="grow" small variant="success"></b-spinner> <b>Second Title</b>
            </template>
            <template #title v-else> 
                <b>Title</b>
            </template>
        </b-tab>

Answer 1

您可以将属性绑定到 <b-tabs> v-model，它将包含活动选项卡的索引。然后使用它来检查您的 v-if 选项卡是否处于活动状态。

new Vue({
  el: '#app',
  data() {
    return {
      currentTab: 0
    }
  }
});

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app" class="p-4">
  <b-tabs v-model="currentTab" fill>
    <b-tab title="First">
      <template #title v-if="currentTab === 0">
        <b-spinner type="grow" small variant="success"></b-spinner> <b>Active Title</b>
      </template> Tab 1 content
    </b-tab>
    <b-tab title="Second">
      <template #title v-if="currentTab === 1"> 
        <b-spinner type="grow" small variant="success"></b-spinner> <b>Second Title</b>
      </template> Tab 2 content
    </b-tab>
  </b-tabs>
</div>

如果 parent 标签包含 active class - Vue Bootstrap 则有条件地显示不同的组件

Show different component conditionally if parent tag contains active class - Vue Bootstrap

vue.js

bootstrap-vue