這篇文章主要給大家介紹了關於如何在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 組件中,我們做了以下設計:
- 因爲 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~
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對神馬文庫的支持。