如何在Vue.js中實現(xiàn)標簽頁組件詳解
更新時間：2019年01月02日 14:10:04 作者：deniro
這篇文章主要給大家介紹了關于如何在Vue.js中實現(xiàn)標簽頁組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
標簽頁組件，即實現(xiàn)選項卡切換，常用于平級內(nèi)容的收納與展示。
因為每個標簽頁的內(nèi)容是由使用組件的父級控制的，即這部分內(nèi)容為一個 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 組件需要控制標簽頁內(nèi)容的顯示與隱藏，所以我們在 data 中定義了一個 isShow，并用 v-show 指令來控制內(nèi)容的顯示或隱藏。當點擊這個 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 內(nèi)容，我們通過傳入的 name 與某個 tab 中的 index，逐一比對，如果確定是我們需要關閉的標簽頁，那么就隱藏其內(nèi)容。其實這里使用 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~
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
Vue3中toRef、toRefs都是與響應式數(shù)據(jù)相關的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
本文主要介紹了使用Elemen加上lang=“ts“后編譯報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue表單驗證rules及validator驗證器的使用方法實例
在vue開發(fā)中,難免遇到各種表單校驗,下面這篇文章主要給大家介紹了關于vue表單驗證rules及validator驗證器使用的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,對于程序員來說bug調試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關于Vue環(huán)境搭建報錯整理的相關資料,需要的朋友可以參考下2022-08-08
uniApp?h5項目如何通過命令行打包并生成指定路徑及文件名稱
用uni-app來寫安卓端,近日需要將程序打包為H5放到web服務器上,經(jīng)過一番折騰,這里給大家分享下,這篇文章主要給大家介紹了關于uniApp?h5項目如何通過命令行打包并生成指定路徑及文件名稱的相關資料,需要的朋友可以參考下2024-02-02
vue3出來好一段時間了,一直想著用一下,下面這篇文章主要給大家介紹了關于vue3使用element?ui的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要給大家介紹了關于vue點擊單張圖片放大實現(xiàn)的相關資料,在vue項目中實現(xiàn)點擊圖片放大功能相信對大家來說都不陌生,文中給出了詳細的js示例代碼,需要的朋友可以參考下2023-07-07
element上傳組件循環(huán)引用及簡單時間倒計時的實現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡單時間倒計時的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
使用vue.js實現(xiàn)checkbox的全選和多個的刪除功能
這篇文章主要介紹了使用vue.js實現(xiàn)checkbox的全選和多個的刪除功能,需要的朋友可以參考下2017-02-02