当使用索引浏览选项卡时，Bootstrap vue选项卡组件不起作用

Question

为什么这个非常简单的bootstrap vue脚本不起作用，在按下切换按钮时，它不会增加值tabIndex。

• tabIndex从0开始，用户按下tabIndex，值仍然为0。

• 如果从disabled属性中删除tabIndex，它会起作用，但不会达到我要求的目的。脚本可以在这里看到：https://jsfiddle.net/Xarina/tkoyph4x/1/

  <div id="app">
  <b-card no-block>{{tabIndex}}
  <b-tabs small card ref="tabs" v-model="tabIndex">
  <b-tab title="General">
  I'm the first fading tab
  </b-tab>
  <b-tab title="Edit profile" :disabled="tabIndex < 1">
  I'm the second tab
  </b-tab>
  <b-tab title="Premium Plan" :disabled="tabIndex < 2">
  Sibzamini!
  </b-tab>
  </b-tabs>
  </b-card>
  <button @click="tabIndex++">
  Click to toggle disable
  </button>
  </div>
  

Answer 1

发生这种情况是因为您无法切换到禁用的选项卡。检查发生在索引被禁用之前，这意味着它将把选项卡索引设置回0。

您可以通过使用两个数据属性来解决这一问题，一个用于禁用选项卡，另一个用于<b-tabs>v-model。然后使用更新属性以首先禁用，并在$nextTick回调中更新v-model属性。

在下面的示例中，当其他属性发生变化时，我使用watcher自动设置第二个属性。

new Vue({
el: '#app',
data() {
return {
currentTab: 0,
disabledTabIndex: 0
}
},
watch: {
disabledTabIndex(newVal) {
this.$nextTick(() => {
this.currentTab = newVal;
})
}
}
});

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card no-block>
Current tab: {{ currentTab }}
<b-tabs small card ref="tabs" v-model="currentTab">
<b-tab title="General">I'm the first fading tab</b-tab>
<b-tab title="Edit profile" :disabled="disabledTabIndex < 1">
I'm the second tab
</b-tab>
<b-tab title="Premium Plan" :disabled="disabledTabIndex < 2">
Sibzamini!
</b-tab>
</b-tabs>
</b-card>
<button @click="disabledTabIndex++">Click to toggle disable</button>
</div>

Answer 2

您可以根据tabIndex:使用title-item-class将自定义类绑定到每个tab

window.app = new Vue({
el: '#app',
data: () => ({ tabs: [], tabCounter: 0, disabled: false, tabIndex: 0 }),
});

.disabledTab .nav-link {  pointer-events: none; color: #666666; }

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfi0ll@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card no-block>{{tabIndex}}
<b-tabs small card ref="tabs" v-model="tabIndex">
<b-tab title="General">I'm the first fading tab</b-tab>
<b-tab title="Edit profile" :title-item-class="{ disabledTab: tabIndex < 1 }">I'm the second tab</b-tab>
<b-tab title="Premium Plan" :title-item-class="{ disabledTab: tabIndex < 2 }">Sibzamini!</b-tab>
</b-tabs>
</b-card>
<button @click="tabIndex++">Click to toggle disable</button>
</div>