說說如何在 Vue.js 中實現標籤頁元件
阿新 • • 發佈：2019-01-01
標籤頁元件，即實現選項卡切換，常用於平級內容的收納與展示。
因為每個標籤頁的內容是由使用元件的父級控制的，即這部分內容為一個 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 元件：
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 元件中，我們做了以下設計：
- 因為 pane 元件需要控制標籤頁內容的顯示與隱藏，所以我們在 data 中定義了一個 isShow，並用 v-show 指令來控制內容的顯示或隱藏。當點選這個 pane 所對應的標籤頁標題時，它的 isShow 被設定為 true。
- 我們需要一個標識來識別不同的標籤頁標題，本示例用的是 pane 元件定義順序的索引。
- 在 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();
}
}
});
複製程式碼getTabs()中通過this.$children來獲取定義的所有 pane 元件。因為很多地方都會用到getTabs()，所以這裡把它單獨定義出來。- 注意： methods 中如果存在回撥函式，那麼需要在外層事先定義一個
var that = this;，在 that 中引用 Vue 例項本身，也可以使用 ES2015 的箭頭函式。 - 在初始化方法中，我們通過迭代 pane 元件，初始化了標題陣列，label 取定義的標題，name 取所在的索引。 標題陣列用於模板定義中。
updateIsShowStatus()用於更新 tab 是否顯示狀態。之所以獨立出來，是為了在監聽 currentIndex 發生變化時，也能呼叫該方法。- 在模板定義中，我們使用
v-for指令渲染出標題，並綁定了 tabClass 函式，從而實現了動態設定樣式。因為需要傳參，所以不能使用計算屬性。 - 點選每一個 tab 標題時，會觸發
change()，來更新 value 值為相應的索引值。在 watch 中，我們監聽了 value 值，當 value 值發生改變時，更新 currentIndex。也監聽了 currentIndex 值，當 currentIndex 值發生改變時，更新 pane 是否顯示狀態。
總結如下：
- 使用元件巢狀方式，將多個 pane 元件作為 tabs 元件的 slot。
- 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;
}
複製程式碼效果：
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>',
...
複製程式碼- 這裡使用 v-if 指令，根據 closable 的值來判斷是否構建 “關閉” 標籤。
- 點選事件綁定了
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;
}
});
}
複製程式碼- 首先在標題陣列中刪除對應的標題元素，因為 Vue.js 的核心是資料與檢視的雙向繫結。因此當我們修改陣列時， Vue.js 就會檢測到陣列發生了變化，所以用 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">
火星疑似發現“外星人墓地”？至今無法解釋
</pane>
<pane label="體育">
全美沸騰！湖人隊4年1.2億迎頂級後衛，詹姆斯：有他就能奪冠
</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~