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

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

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

前言

標簽頁組件，即實現(xiàn)選項卡切換，常用于平級內容的收納與展示。

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

1 基礎版

因為 tabs 組件中的標題是在 pane 組件中定義的，所以在初始化或者動態(tài)變化標題時，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="科技">
 火星疑似發(fā)現(xiàn)“外星人墓地”？至今無法解釋
 </pane>
 <pane label="體育">
 全美沸騰！湖人隊4年1.2億迎頂級后衛(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: {
 //標題
 label: {
 type: String,
 default: ''
 }
 },
 data: function () {
 return {
 //顯示或隱藏
 isShow: true
 }
 },
 methods: {
 //通知父組件，更新標題
 init() {
 this.$parent.init();
 }
 },
 watch: {
 //當 label 值發(fā)生變化時，更新標題
 label() {
 this.init();
 }
 },
 //掛載時，更新標題
 mounted() {
 this.init();
 }
});

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

因為 pane 組件需要控制標簽頁內容的顯示與隱藏，所以我們在 data 中定義了一個 isShow，并用 v-show 指令來控制內容的顯示或隱藏。當點擊這個 pane 所對應的標簽頁標題時，它的 isShow 被設置為 true。
我們需要一個標識來識別不同的標簽頁標題，本示例用的是 pane 組件定義順序的索引。
在 props 中定義了 label，用于存放標題。因為 label 可以動態(tài)變化，所以必須在掛載 pane 以及當 label 值發(fā)生變化（通過監(jiān)聽實現(xiàn)）時，通知父組件，重新初始化標題。因為 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 是否顯示狀態(tài)
 updateIsShowStatus() {
 var tabs = this.getTabs();
 var that = this;
 //迭代判斷并設置某個標簽頁是顯示還是隱藏狀態(tài)
 tabs.forEach(function (tab, index) {
 return tab.isShow = (index === that.currentIndex);
 })
 },
 //初始化
 init() {
 /**
 * 初始化標題數(shù)組
 */
 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 值發(fā)生改變時，更新 currentIndex
 value: function (val) {
 this.currentIndex = val;
 },
 //當 currentIndex 值發(fā)生改變時，更新 pane 是否顯示狀態(tài)
 currentIndex: function () {
 this.updateIsShowStatus();
 }
 }
});

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

總結如下：

使用組件嵌套方式，將多個 pane 組件作為 tabs 組件的 slot。
tabs 組件與 pane 組件，通過父子鏈（即 $parent 與 $children）實現(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 關閉屬性

我們?yōu)?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>',
...

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

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

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

	var tabs = this.getTabs();
	var that = this;
	//迭代判斷并設置點擊的標簽頁是隱藏狀態(tài)
	tabs.forEach(function (tab, index) {
		if (index === name) {
			return tab.isShow = false;
		}
	});
}

首先在標題數(shù)組中刪除對應的標題元素，因為 Vue.js 的核心是數(shù)據(jù)與視圖的雙向綁定。因此當我們修改數(shù)組時， Vue.js 就會檢測到數(shù)組發(fā)生了變化，所以用 v-for 渲染的視圖也會同步更新。
接著，隱藏對應的 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">
 火星疑似發(fā)現(xiàn)“外星人墓地”？至今無法解釋
 </pane>
 <pane label="體育">
 全美沸騰！湖人隊4年1.2億迎頂級后衛(wèi)，詹姆斯：有他就能奪冠
 </pane>
 <pane label="娛樂" closable="true">
 阿米爾汗談中國武俠 想拍印度版《鹿鼎記》
 </pane>
 </tabs>
</div>

效果：

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;
}

效果：

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

本文示例代碼

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

vue-cli腳手架-bulid下的配置文件
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
vue引用js文件的多種方式(推薦)
這篇文章主要介紹了vue引用js文件的多種方式,本文大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-05-05
詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧
這篇文章主要介紹了詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
vue異步請求數(shù)據(jù)重新渲染方式
這篇文章主要介紹了vue異步請求數(shù)據(jù)重新渲染方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-01-01
vuejs父子組件之間數(shù)據(jù)交互詳解
這篇文章主要為大家詳細介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
vue運行卡死的問題
這篇文章主要介紹了vue運行卡死的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue連接本地服務器的實現(xiàn)示例
本文主要介紹了vue連接本地服務器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2024-01-01
解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected&n
這篇文章介紹了解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected token ＜報錯的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
vue組件的路由高亮問題解決方法
這篇文章主要給大家介紹了關于vue組件的路由高亮問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-05-05
Vue中computed及watch區(qū)別實例解析
這篇文章主要介紹了Vue中computed及watch區(qū)別實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08