<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>

利用插槽向選項(xiàng)卡標(biāo)題添加icon圖標(biāo)，選關(guān)閉按鈕圖形，并綁定關(guān)閉事件。修改后代碼如下：

<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">
? ? ? ? ? ? <!--用插槽想標(biāo)題添加icon圖標(biāo)，同時將關(guān)閉按鈕調(diào)用的時間轉(zhuǎn)移到圖標(biāo)的點(diǎn)擊事件中執(zhí)行-->
? ? ? ? ? ? <template v-slot:title>
? ? ? ? ? ? ? ? ? ? Tab{{ i }}
? ? ? ? ? ? ? ? ? ? <!--插入icon圖標(biāo)，關(guān)閉按鈕圖形-->
? ? ? ? ? ? ? ? ? ? <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>