說說如何在 Vue.js 中實現標籤頁元件

deniro發表於2019-03-04
Vue.js元件

說說如何在 Vue.js 中實現標籤頁元件

標籤頁元件，即實現選項卡切換，常用於平級內容的收納與展示。

因為每個標籤頁的內容是由使用元件的父級控制的，即這部分內容為一個 slot。所以一般的設計方案是，在 slot 中定義多個 div，然後在接到切換訊息時，再顯示或隱藏相關的 div。這裡面就把相關的互動邏輯也編寫進來了，我們希望在元件中處理這些互動邏輯，slot 只單純處理業務邏輯。這可以通過再定義一個 pane 元件來實現，pane 元件嵌在 tabs 元件中。

1 基礎版

因為 tabs 元件中的標題是在 pane 元件中定義的，所以在初始化或者動態變化標題時，tabs 元件需要從 pane 元件中獲取標題。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤頁元件</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="app" v-cloak>
    <tabs v-model="activeIndex">
        <pane label="科技">
            火星疑似發現“外星人墓地”？至今無法解釋
        </pane>
        <pane label="體育">
            全美沸騰！湖人隊4年1.2億迎頂級後衛，詹姆斯：有他就能奪冠
        </pane>
        <pane label="娛樂">
            阿米爾汗談中國武俠 想拍印度版《鹿鼎記》
        </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: {
        //標題
        label: {
            type: String,
            default: ''
        }
    },
    data: function () {
        return {
            //顯示或隱藏
            isShow: true
        }
    },
    methods: {
        //通知父元件，更新標題
        init() {
            this.$parent.init();
        }
    },
    watch: {
        //當 label 值發生變化時，更新標題
        label() {
            this.init();
        }
    },
    //掛載時，更新標題
    mounted() {
        this.init();
    }
});
複製程式碼

在 pane 元件中，我們做了以下設計：

  1. 因為 pane 元件需要控制標籤頁內容的顯示與隱藏，所以我們在 data 中定義了一個 isShow，並用 v-show 指令來控制內容的顯示或隱藏。當點選這個 pane 所對應的標籤頁標題時，它的 isShow 被設定為 true。
  2. 我們需要一個標識來識別不同的標籤頁標題，本示例用的是 pane 元件定義順序的索引。
  3. 在 props 中定義了 label，用於存放標題。因為 label 可以動態變化，所以必須在掛載 pane 以及當 label 值發生變化（通過監聽實現）時，通知父元件，重新初始化標題。因為 pane 是獨立元件，所以這裡使用了 this.$parent 來呼叫父元件 tabs 的初始化方法。

tabs 元件：

Vue.component('tabs', {
    template: '\
    <div class="tabs">\
        <div class="tabs-bar">\
            <!-- 標籤頁標題-->\
            <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: []//存放標題
        }
    },
    methods: {
        //設定樣式
        tabClass: function (item) {
            return ['tabs-tab', {
                //為當前選中的 tab 新增選中樣式
                'tabs-tab-active': (item.name === this.currentIndex)
            }]

        },
        //獲取定義的所有 pane 元件
        getTabs() {
            return this.$children.filter(function (item) {
                return item.$options.name === 'pane';
            })
        },
        //更新 pane 是否顯示狀態
        updateIsShowStatus() {
            var tabs = this.getTabs();
            var that = this;
            //迭代判斷並設定某個標籤頁是顯示還是隱藏狀態
            tabs.forEach(function (tab, index) {
                return tab.isShow = (index === that.currentIndex);
            })
        },
        //初始化
        init() {
            /**
             * 初始化標題陣列
             */
            this.titleList = [];
            var that = this;//設定 this 引用
            this.getTabs().forEach(function (tab, index) {
                that.titleList.push({
                    label: tab.label,
                    name: index
                });

                //初始化預設選中的 tab 索引
                if (index === 0) {
                    if (!that.currentIndex) {
                        that.currentIndex = index;
                    }
                }
            });

            this.updateIsShowStatus();
        },
        //點選 tab 標題時，更新 value 值為相應的索引值
        change: function (index) {
            var nav = this.titleList[index];
            var name = nav.name;
            this.$emit('input', name);
        }
    },
    watch: {
        //當 value 值發生改變時，更新 currentIndex
        value: function (val) {
            this.currentIndex = val;
        },
        //當 currentIndex 值發生改變時，更新 pane 是否顯示狀態
        currentIndex: function () {
            this.updateIsShowStatus();
        }
    }
});
複製程式碼
  1. getTabs() 中通過 this.$children 來獲取定義的所有 pane 元件。因為很多地方都會用到getTabs() ，所以這裡把它單獨定義出來。
  2. 注意： methods 中如果存在回撥函式，那麼需要在外層事先定義一個 var that = this;，在 that 中引用 Vue 例項本身，也可以使用 ES2015 的箭頭函式。
  3. 在初始化方法中，我們通過迭代 pane 元件，初始化了標題陣列，label 取定義的標題，name 取所在的索引。 標題陣列用於模板定義中。
  4. updateIsShowStatus() 用於更新 tab 是否顯示狀態。之所以獨立出來，是為了在監聽 currentIndex 發生變化時，也能呼叫該方法。
  5. 在模板定義中，我們使用 v-for 指令渲染出標題，並繫結了 tabClass 函式，從而實現了動態設定樣式。因為需要傳參，所以不能使用計算屬性。
  6. 點選每一個 tab 標題時，會觸發 change()，來更新 value 值為相應的索引值。在 watch 中，我們監聽了 value 值，當 value 值發生改變時，更新 currentIndex。也監聽了 currentIndex 值，當 currentIndex 值發生改變時，更新 pane 是否顯示狀態。

總結如下：

  1. 使用元件巢狀方式，將多個 pane 元件作為 tabs 元件的 slot。
  2. tabs 元件與 pane 元件，通過父子鏈（即 $parent 與 $children）實現通訊。

樣式：

[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;
}
複製程式碼

效果：

說說如何在 Vue.js 中實現標籤頁元件

2 關閉屬性

我們為 pane 元件新增一個 closable 屬性，用於控制該標籤是否可關閉。

在子視窗元件的 props 中，新增 closable 屬性：

props: {
	...
	//是否可關閉
	closable: {
		type: Boolean,
		default: false
	}
}
複製程式碼

在標籤頁元件中的模板中，新增關閉標籤：

...
template: '\
<div class="tabs">\
	<div class="tabs-bar">\
		<!-- 標籤頁標題-->\
		<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 指令，根據 closable 的值來判斷是否構建 “關閉” 標籤。
  2. 點選事件繫結了 close() 函式，傳入標籤所在索引以及標籤的名稱。

在標籤頁元件中的方法中，新增了 close()，用於執行關閉標籤頁邏輯：

close: function (index, name) {
        //刪除對應的標題元素
	this.titleList.splice(index, 1);

	var tabs = this.getTabs();
	var that = this;
	//迭代判斷並設定點選的標籤頁是隱藏狀態
	tabs.forEach(function (tab, index) {
		if (index === name) {
			return tab.isShow = false;
		}
	});
}
複製程式碼
  1. 首先在標題陣列中刪除對應的標題元素，因為 Vue.js 的核心是資料與檢視的雙向繫結。因此當我們修改陣列時， Vue.js 就會檢測到陣列發生了變化，所以用 v-for 渲染的檢視也會同步更新 。
  2. 接著，隱藏對應的 tab 內容，我們通過傳入的 name 與某個 tab 中的 index，逐一比對，如果確定是我們需要關閉的標籤頁，那麼就隱藏其內容。其實這裡使用 key 來表達更合適。

新增的樣式：

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

.close:hover {
    color: #990033;
    font-weight: bolder;
}
複製程式碼

為需要新增關閉標籤的 pane ，新增 closable 屬性：

<div id="app" v-cloak>
    <tabs v-model="activeIndex">
        <pane label="科技" closable="true">
            火星疑似發現“外星人墓地”？至今無法解釋
        </pane>
        <pane label="體育">
            全美沸騰！湖人隊4年1.2億迎頂級後衛，詹姆斯：有他就能奪冠
        </pane>
        <pane label="娛樂" closable="true">
            阿米爾汗談中國武俠 想拍印度版《鹿鼎記》
        </pane>
    </tabs>
</div>
複製程式碼

效果：

說說如何在 Vue.js 中實現標籤頁元件

3 切換動畫

我們在切換標籤頁時，加上滑動動畫吧，這很簡單，只要在啟用的樣式中加上 transform 與 transition 樣式即可：

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

效果：

說說如何在 Vue.js 中實現標籤頁元件

我們讓標籤頁標題被點選時，以動畫的形式往上移動 1 個畫素。是不是很酷呀O(∩_∩)O~

本文示例程式碼

相關文章