BootstrapVue選項(xiàng)卡標(biāo)題增加關(guān)閉按鈕的方法

更新時(shí)間：2022年04月01日 10:21:09 作者：titan80001

這篇文章主要為大家詳細(xì)介紹了BootstrapVue選項(xiàng)卡標(biāo)題增加關(guān)閉按鈕的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

BootstrapVue選項(xiàng)卡標(biāo)題增加關(guān)閉按鈕，供大家參考，具體內(nèi)容如下

BootstrapVue官網(wǎng)選項(xiàng)卡組件中，沒有列出選項(xiàng)卡標(biāo)題帶關(guān)閉按鈕的，這里參照官網(wǎng)的例子進(jìn)行修改，給標(biāo)題加上關(guān)閉按鈕。

官網(wǎng)舉例：

<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)，同時(shí)將關(guān)閉按鈕調(diào)用的時(shí)間轉(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>