說(shuō)說(shuō)如何在 Vue.js 中實(shí)現(xiàn)標(biāo)簽頁(yè)組件

標(biāo)簽頁(yè)組件，即實(shí)現(xiàn)選項(xiàng)卡切換，常用于平級(jí)內(nèi)容的收納與展示。

因?yàn)槊總€(gè)標(biāo)簽頁(yè)的內(nèi)容是由使用組件的父級(jí)控制的，即這部分內(nèi)容為一個(gè) slot。所以一般的設(shè)計(jì)方案是，在 slot 中定義多個(gè) div，然后在接到切換消息時(shí)，再顯示或隱藏相關(guān)的 div。這里面就把相關(guān)的交互邏輯也編寫(xiě)進(jìn)來(lái)了，我們希望在組件中處理這些交互邏輯，slot 只單純處理業(yè)務(wù)邏輯。這可以通過(guò)再定義一個(gè) pane 組件來(lái)實(shí)現(xiàn)，pane 組件嵌在 tabs 組件中。

1 基礎(chǔ)版

因?yàn)?tabs 組件中的標(biāo)題是在 pane 組件中定義的，所以在初始化或者動(dòng)態(tài)變化標(biāo)題時(shí)，tabs 組件需要從 pane 組件中獲取標(biāo)題。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標(biāo)簽頁(yè)組件</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="app" v-cloak>
    <tabs v-model="activeIndex">
        <pane label="科技">
            火星疑似發(fā)現(xiàn)“外星人墓地”？至今無(wú)法解釋
        </pane>
        <pane label="體育">
            全美沸騰！湖人隊(duì)4年1.2億迎頂級(jí)后衛(wèi)，詹姆斯：有他就能奪冠
        </pane>
        <pane label="娛樂(lè)">
            阿米爾汗談中國(guó)武俠 想拍印度版《鹿鼎記》
        </pane>
    </tabs>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="tabs.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeIndex: 0
        }
    });
</script>
</body>
</html>

pane 組件：

Vue.component('pane', {
    name: 'pane',
    template: '\
    <div class="pane" v-show="isShow">\
        <slot></slot>\
    </div>\
    ',
    props: {
        //標(biāo)題
        label: {
            type: String,
            default: ''
        }
    },
    data: function () {
        return {
            //顯示或隱藏
            isShow: true
        }
    },
    methods: {
        //通知父組件，更新標(biāo)題
        init() {
            this.$parent.init();
        }
    },
    watch: {
        //當(dāng) label 值發(fā)生變化時(shí)，更新標(biāo)題
        label() {
            this.init();
        }
    },
    //掛載時(shí)，更新標(biāo)題
    mounted() {
        this.init();
    }
});

在 pane 組件中，我們做了以下設(shè)計(jì)：

  1. 因?yàn)?pane 組件需要控制標(biāo)簽頁(yè)內(nèi)容的顯示與隱藏，所以我們?cè)?data 中定義了一個(gè) isShow，并用 v-show 指令來(lái)控制內(nèi)容的顯示或隱藏。當(dāng)點(diǎn)擊這個(gè) pane 所對(duì)應(yīng)的標(biāo)簽頁(yè)標(biāo)題時(shí)，它的 isShow 被設(shè)置為 true。
  2. 我們需要一個(gè)標(biāo)識(shí)來(lái)識(shí)別不同的標(biāo)簽頁(yè)標(biāo)題，本示例用的是 pane 組件定義順序的索引。
  3. 在 props 中定義了 label，用于存放標(biāo)題。因?yàn)?label 可以動(dòng)態(tài)變化，所以必須在掛載 pane 以及當(dāng) label 值發(fā)生變化（通過(guò)監(jiān)聽(tīng)實(shí)現(xiàn)）時(shí)，通知父組件，重新初始化標(biāo)題。因?yàn)?pane 是獨(dú)立組件，所以這里使用了 this.$parent 來(lái)調(diào)用父組件 tabs 的初始化方法。

tabs 組件：

Vue.component('tabs', {
    template: '\
    <div class="tabs">\
        <div class="tabs-bar">\
            <!-- 標(biāo)簽頁(yè)標(biāo)題-->\
            <div :class="tabClass(item)"\
                v-for="(item, index) in titleList"\
                @click="change(index)">\
                {{ item.label }}\
                </div>\
            </div>\
            <div class="tabs-content">\
             <!-- pane 組件位置-->\
                <slot></slot>\
            </div>\
           </div>',
    props: {
        value: {
            type: [String, Number]
        }
    },
    data: function () {
        return {
            currentIndex: this.value,
            titleList: []//存放標(biāo)題
        }
    },
    methods: {
        //設(shè)置樣式
        tabClass: function (item) {
            return ['tabs-tab', {
                //為當(dāng)前選中的 tab 添加選中樣式
                'tabs-tab-active': (item.name === this.currentIndex)
            }]

        },
        //獲取定義的所有 pane 組件
        getTabs() {
            return this.$children.filter(function (item) {
                return item.$options.name === 'pane';
            })
        },
        //更新 pane 是否顯示狀態(tài)
        updateIsShowStatus() {
            var tabs = this.getTabs();
            var that = this;
            //迭代判斷并設(shè)置某個(gè)標(biāo)簽頁(yè)是顯示還是隱藏狀態(tài)
            tabs.forEach(function (tab, index) {
                return tab.isShow = (index === that.currentIndex);
            })
        },
        //初始化
        init() {
            /**
             * 初始化標(biāo)題數(shù)組
             */
            this.titleList = [];
            var that = this;//設(shè)置 this 引用
            this.getTabs().forEach(function (tab, index) {
                that.titleList.push({
                    label: tab.label,
                    name: index
                });

                //初始化默認(rèn)選中的 tab 索引
                if (index === 0) {
                    if (!that.currentIndex) {
                        that.currentIndex = index;
                    }
                }
            });

            this.updateIsShowStatus();
        },
        //點(diǎn)擊 tab 標(biāo)題時(shí)，更新 value 值為相應(yīng)的索引值
        change: function (index) {
            var nav = this.titleList[index];
            var name = nav.name;
            this.$emit('input', name);
        }
    },
    watch: {
        //當(dāng) value 值發(fā)生改變時(shí)，更新 currentIndex
        value: function (val) {
            this.currentIndex = val;
        },
        //當(dāng) currentIndex 值發(fā)生改變時(shí)，更新 pane 是否顯示狀態(tài)
        currentIndex: function () {
            this.updateIsShowStatus();
        }
    }
});
  1. getTabs() 中通過(guò) this.$children 來(lái)獲取定義的所有 pane 組件。因?yàn)楹芏嗟胤蕉紩?huì)用到getTabs() ，所以這里把它單獨(dú)定義出來(lái)。
  2. 注意： methods 中如果存在回調(diào)函數(shù)，那么需要在外層事先定義一個(gè) var that = this;，在 that 中引用 Vue 實(shí)例本身，也可以使用 ES2015 的箭頭函數(shù)。
  3. 在初始化方法中，我們通過(guò)迭代 pane 組件，初始化了標(biāo)題數(shù)組，label 取定義的標(biāo)題，name 取所在的索引。 標(biāo)題數(shù)組用于模板定義中。
  4. updateIsShowStatus() 用于更新 tab 是否顯示狀態(tài)。之所以獨(dú)立出來(lái)，是為了在監(jiān)聽(tīng) currentIndex 發(fā)生變化時(shí)，也能調(diào)用該方法。
  5. 在模板定義中，我們使用 v-for 指令渲染出標(biāo)題，并綁定了 tabClass 函數(shù)，從而實(shí)現(xiàn)了動(dòng)態(tài)設(shè)置樣式。因?yàn)樾枰獋鲄ⅲ圆荒苁褂糜?jì)算屬性。
  6. 點(diǎn)擊每一個(gè) tab 標(biāo)題時(shí)，會(huì)觸發(fā) change()，來(lái)更新 value 值為相應(yīng)的索引值。在 watch 中，我們監(jiān)聽(tīng)了 value 值，當(dāng) value 值發(fā)生改變時(shí)，更新 currentIndex。也監(jiān)聽(tīng)了 currentIndex 值，當(dāng) currentIndex 值發(fā)生改變時(shí)，更新 pane 是否顯示狀態(tài)。

總結(jié)如下：

  1. 使用組件嵌套方式，將多個(gè) pane 組件作為 tabs 組件的 slot。
  2. tabs 組件與 pane 組件，通過(guò)父子鏈（即 $parent 與 $children）實(shí)現(xiàn)通信。

樣式：

[v-cloak] {
    display: none;
}

.tabs {
    font-size: 14px;
    color: #657180;
}

.tabs-bar:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #d7dde4;
    margin-top: -1px;
}

.tabs-tab {
    display: inline-block;
    padding: 4px 16px;
    margin-right: 6px;
    background: #fff;
    border: 1px solid #d7dde4;
    cursor: pointer;
    position: relative;
}

.tabs-tab:hover {
    color: #336699;
    font-weight: bolder;
}

.tabs-tab-active {
    color: #336699;
    border-top: 1px solid #336699;
    border-bottom: 1px solid #fff;
}

.tabs-tab-active:before {
    content: '';
    display: block;
    height: 1px;
    background: #3399ff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.tabs_content {
    padding: 8px 0;
}

.pane {
    margin-top: 26px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    text-align: justify;
}

效果：

2 關(guān)閉屬性

我們?yōu)?pane 組件新增一個(gè) closable 屬性，用于控制該標(biāo)簽是否可關(guān)閉。

在子窗口組件的 props 中，新增 closable 屬性：

props: {
    ...
    //是否可關(guān)閉
    closable: {
        type: Boolean,
        default: false
    }
}

在標(biāo)簽頁(yè)組件中的模板中，新增關(guān)閉標(biāo)簽：

...
template: '\
<div class="tabs">\
    <div class="tabs-bar">\
        <!-- 標(biāo)簽頁(yè)標(biāo)題-->\
        <div :class="tabClass(item)"\
            v-for="(item, index) in titleList"\
            @click="change(index)">\
            {{ item.label }}\
            <span v-if="item.closable" class="close" @click="close(index,item.name)"></span>\
            </div>\
        </div>\
        <div class="tabs-content">\
         <!-- pane 組件位置-->\
            <slot></slot>\
        </div>\
       </div>',
...
  1. 這里使用 v-if 指令，根據(jù) closable 的值來(lái)判斷是否構(gòu)建 “關(guān)閉” 標(biāo)簽。
  2. 點(diǎn)擊事件綁定了 close() 函數(shù)，傳入標(biāo)簽所在索引以及標(biāo)簽的名稱(chēng)。

在標(biāo)簽頁(yè)組件中的方法中，新增了 close()，用于執(zhí)行關(guān)閉標(biāo)簽頁(yè)邏輯：

close: function (index, name) {
        //刪除對(duì)應(yīng)的標(biāo)題元素
    this.titleList.splice(index, 1);

    var tabs = this.getTabs();
    var that = this;
    //迭代判斷并設(shè)置點(diǎn)擊的標(biāo)簽頁(yè)是隱藏狀態(tài)
    tabs.forEach(function (tab, index) {
        if (index === name) {
            return tab.isShow = false;
        }
    });
}
  1. 首先在標(biāo)題數(shù)組中刪除對(duì)應(yīng)的標(biāo)題元素，因?yàn)?Vue.js 的核心是數(shù)據(jù)與視圖的雙向綁定。因此當(dāng)我們修改數(shù)組時(shí)， Vue.js 就會(huì)檢測(cè)到數(shù)組發(fā)生了變化，所以用 v-for 渲染的視圖也會(huì)同步更新 。
  2. 接著，隱藏對(duì)應(yīng)的 tab 內(nèi)容，我們通過(guò)傳入的 name 與某個(gè) tab 中的 index，逐一比對(duì)，如果確定是我們需要關(guān)閉的標(biāo)簽頁(yè)，那么就隱藏其內(nèi)容。其實(shí)這里使用 key 來(lái)表達(dá)更合適。

新增的樣式：

.close{
    color: #FF6666;
}
.close::before {
    content: "\2716";
}

.close:hover {
    color: #990033;
    font-weight: bolder;
}

為需要添加關(guān)閉標(biāo)簽的 pane ，添加 closable 屬性：

<div id="app" v-cloak>
    <tabs v-model="activeIndex">
        <pane label="科技" closable="true">
            火星疑似發(fā)現(xiàn)“外星人墓地”？至今無(wú)法解釋
        </pane>
        <pane label="體育">
            全美沸騰！湖人隊(duì)4年1.2億迎頂級(jí)后衛(wèi)，詹姆斯：有他就能奪冠
        </pane>
        <pane label="娛樂(lè)" closable="true">
            阿米爾汗談中國(guó)武俠 想拍印度版《鹿鼎記》
        </pane>
    </tabs>
</div>

效果：

3 切換動(dòng)畫(huà)

我們?cè)谇袚Q標(biāo)簽頁(yè)時(shí)，加上滑動(dòng)動(dòng)畫(huà)吧，這很簡(jiǎn)單，只要在激活的樣式中加上 transform 與 transition 樣式即可：

.tabs-tab-active {
    color: #336699;
    border-top: 1px solid #336699;
    border-bottom: 1px solid #fff;
    transform:translateY(-1px);
    transition: transform 0.5s;
}

效果：

我們讓標(biāo)簽頁(yè)標(biāo)題被點(diǎn)擊時(shí)，以動(dòng)畫(huà)的形式往上移動(dòng) 1 個(gè)像素。是不是很酷呀O(∩_∩)O~

本文示例代碼

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容