BootstrapVue选项卡标题增加关闭按钮，供大家参考，具体内容如下
BootstrapVue官网选项卡组件中，没有列出选项卡标题带关闭按钮的，这里参照官网的例子进行修改，给标题加上关闭按钮。
官网举例：
<template>
<div>
<b-card no-body>
<b-tabs card>
<!-- Render Tabs, supply a unique `key` to each tab -->
<b-tab v-for="i in tabs" :key="'dyn-tab-' i" :title="'Tab ' i">
Tab contents {{ i }}
<b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
Close tab
</b-button>
</b-tab>
<!-- New Tab Button (Using tabs-end slot) -->
<template v-slot:tabs-end>
<b-nav-item @click.prevent="newTab" href="#" ><b> </b></b-nav-item>
</template>
<!-- Render this if no tabs -->
<template v-slot:empty>
<div class="text-center text-muted">
There are no open tabs<br>
Open a new tab using the <b> </b> button above.
</div>
</template>
</b-tabs>
</b-card>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [],
tabCounter: 0
}
},
methods: {
closeTab(x) {
for (let i = 0; i < this.tabs.length; i ) {
if (this.tabs[i] === x) {
this.tabs.splice(i, 1)
}
}
},
newTab() {
this.tabs.push(this.tabCounter )
}
}
}
</script>
利用插槽向选项卡标题添加icon图标，选关闭按钮图形，并绑定关闭事件。修改后代码如下：
<template>
<div>
<div>
<b-nav-item @click.prevent="newTab" href="#" ><b>添加Tab页</b></b-nav-item>
</div>
<div>
<b-card no-body>
<b-tabs card>
<!-- Render Tabs, supply a unique `key` to each tab -->
<b-tab v-for="i in tabs" :key="'dyn-tab-' i">
<!--用插槽想标题添加icon图标，同时将关闭按钮调用的时间转移到图标的点击事件中执行-->
<template v-slot:title>
Tab{{ i }}
<!--插入icon图标，关闭按钮图形-->
<a @click="closeTab(i)">
<b-icon icon="x-square"></b-icon>
</a>
</template>
<h1> Tab-{{i}} </h1>
</b-tab>
<!-- New Tab Button (Using tabs-end slot) -->
<!-- Render this if no tabs -->
<template v-slot:empty>
<div class="text-center text-muted">
There are no open tabs<br>
Open a new tab using the <b> </b> button above.
</div>
</template>
</b-tabs>
</b-card>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tabs: [],
tabCounter: 0
}
},
methods: {
closeTab (x) {
for (let i = 0; i < this.tabs.length; i ) {
if (this.tabs[i] === x) {
this.tabs.splice(i, 1)
}
}
},
newTab () {
this.tabs.push(this.tabCounter )
}
}
}
</script>
官网标签链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。