如何在Vue.js中實(shí)現(xiàn)標(biāo)簽頁組件詳解

更新時(shí)間：2019年01月02日 14:10:04 作者：deniro

這篇文章主要給大家介紹了關(guān)于如何在Vue.js中實(shí)現(xiàn)標(biāo)簽頁組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

因?yàn)槊總€(gè)標(biāo)簽頁的內(nèi)容是由使用組件的父級(jí)控制的，即這部分內(nèi)容為一個(gè) slot。所以一般的設(shè)計(jì)方案是，在 slot 中定義多個(gè) div，然后在接到切換消息時(shí)，再顯示或隱藏相關(guān)的 div。這里面就把相關(guān)的交互邏輯也編寫進(jìn)來了，我們希望在組件中處理這些交互邏輯，slot 只單純處理業(yè)務(wù)邏輯。這可以通過再定義一個(gè) pane 組件來實(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)簽頁組件</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)“外星人墓地”？至今無法解釋
 </pane>
 <pane label="體育">
 全美沸騰！湖人隊(duì)4年1.2億迎頂級(jí)后衛(wèi)，詹姆斯：有他就能奪冠
 </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: {
 //標(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ì)：

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

tabs 組件：

Vue.component('tabs', {
 template: '\
 <div class="tabs">\
 <div class="tabs-bar">\
 <!-- 標(biāo)簽頁標(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)簽頁是顯示還是隱藏狀態(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();
 }
 }
});

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

總結(jié)如下：

使用組件嵌套方式，將多個(gè) pane 組件作為 tabs 組件的 slot。
tabs 組件與 pane 組件，通過父子鏈（即 $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)簽頁組件中的模板中，新增關(guān)閉標(biāo)簽：

...
template: '\
<div class="tabs">\
	<div class="tabs-bar">\
		<!-- 標(biāo)簽頁標(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>',
...

這里使用 v-if 指令，根據(jù) closable 的值來判斷是否構(gòu)建 “關(guān)閉” 標(biāo)簽。
點(diǎn)擊事件綁定了 close() 函數(shù)，傳入標(biāo)簽所在索引以及標(biāo)簽的名稱。

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

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)簽頁是隱藏狀態(tài)
	tabs.forEach(function (tab, index) {
		if (index === name) {
			return tab.isShow = false;
		}
	});
}

首先在標(biāo)題數(shù)組中刪除對(duì)應(yīng)的標(biāo)題元素，因?yàn)?Vue.js 的核心是數(shù)據(jù)與視圖的雙向綁定。因此當(dāng)我們修改數(shù)組時(shí)， Vue.js 就會(huì)檢測到數(shù)組發(fā)生了變化，所以用 v-for 渲染的視圖也會(huì)同步更新。
接著，隱藏對(duì)應(yīng)的 tab 內(nèi)容，我們通過傳入的 name 與某個(gè) tab 中的 index，逐一比對(duì)，如果確定是我們需要關(guān)閉的標(biāo)簽頁，那么就隱藏其內(nèi)容。其實(shí)這里使用 key 來表達(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)“外星人墓地”？至今無法解釋
 </pane>
 <pane label="體育">
 全美沸騰！湖人隊(duì)4年1.2億迎頂級(jí)后衛(wèi)，詹姆斯：有他就能奪冠
 </pane>
 <pane label="娛樂" closable="true">
 阿米爾汗談中國武俠 想拍印度版《鹿鼎記》
 </pane>
 </tabs>
</div>

效果：

3 切換動(dòng)畫

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

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

效果：