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

deniro發表於2019-03-04
說說如何在 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~

本文示例程式碼

相關文章