1. Tabs標(biāo)簽頁

1.1. Tabs標(biāo)簽頁分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類別的數(shù)據(jù)集合。

1.2. Tabs Attributes

參數(shù)	說明	類型	可選值	默認(rèn)值
value / v-model	綁定值, 選中選項(xiàng)卡的name	string	無	第一個(gè)選項(xiàng)卡的name
type	風(fēng)格類型	string	card/border-card	無
closable	標(biāo)簽是否可關(guān)閉	boolean	無	false
addable	標(biāo)簽是否可增加	boolean	無	false
editable	標(biāo)簽是否同時(shí)可增加和關(guān)閉	boolean	無	false
tab-position	選項(xiàng)卡所在位置	string	top/right/bottom/left	top
stretch	標(biāo)簽的寬度是否自撐開	boolean	無	false
before-leave	切換標(biāo)簽之前的鉤子, 若返回false或者返回Promise且被reject, 則阻止切換。	Function(activeName, oldActiveName)	無	無

1.3. Tabs Events

事件名稱	說明	回調(diào)參數(shù)
tab-click	tab被選中時(shí)觸發(fā)	被選中的標(biāo)簽tab實(shí)例
tab-remove	點(diǎn)擊tab移除按鈕后觸發(fā)	被刪除的標(biāo)簽的name
tab-add	點(diǎn)擊tabs的新增按鈕后觸發(fā)	無
edit	點(diǎn)擊tabs的新增按鈕或tab被關(guān)閉后觸發(fā)	(targetName, action)

1.4. Tab-pane Attributes

參數(shù)	說明	類型	可選值	默認(rèn)值
label	選項(xiàng)卡標(biāo)題	string	無	無
disabled	是否禁用	boolean	無	false
name	與選項(xiàng)卡綁定值value對應(yīng)的標(biāo)識符, 表示選項(xiàng)卡別名	string	無	該選項(xiàng)卡在選項(xiàng)卡列表中的順序值, 如第一個(gè)選項(xiàng)卡則為'1'
closable	標(biāo)簽是否可關(guān)閉	boolean	無	false
lazy	標(biāo)簽是否延遲渲染	boolean	無	false

2. Tabs標(biāo)簽頁例子

2.1. 使用腳手架新建一個(gè)名為element-ui-tabs的前端項(xiàng)目, 同時(shí)安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Tabs from '../components/Tabs.vue' import TypeTabs from '../components/TypeTabs.vue' import PositionTabs from '../components/PositionTabs.vue' import SlotTabs from '../components/SlotTabs.vue' import EditableTabs from '../components/EditableTabs.vue' import AddRemoveTabs from '../components/AddRemoveTabs.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Tabs' },{ path: '/Tabs', component: Tabs },{ path: '/TypeTabs', component: TypeTabs },{ path: '/PositionTabs', component: PositionTabs },{ path: '/SlotTabs', component: SlotTabs },{ path: '/EditableTabs', component: EditableTabs },{ path: '/AddRemoveTabs', component: AddRemoveTabs } ]const router = new VueRouter({routes })export default router

2.3. 在components下創(chuàng)建Tabs.vue

<template><div><h1>基礎(chǔ)用法-基礎(chǔ)的、簡潔的標(biāo)簽頁</h1><h4>Tabs組件提供了選項(xiàng)卡功能, 默認(rèn)選中第一個(gè)標(biāo)簽頁, 你也可以通過value屬性來指定當(dāng)前選中的標(biāo)簽頁。</h4><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定時(shí)任務(wù)補(bǔ)償" name="fourth">定時(shí)任務(wù)補(bǔ)償</el-tab-pane></el-tabs></div> </template><script> export default {data () {return {activeName: 'second'}},methods: {handleClick (tab, event) {console.log(tab, event)}} } </script>

2.4. 在components下創(chuàng)建TypeTabs.vue

<template><div><h1>選項(xiàng)卡樣式-選項(xiàng)卡樣式的標(biāo)簽頁</h1><h4>只需要設(shè)置type屬性為card就可以使選項(xiàng)卡改變?yōu)闃?biāo)簽風(fēng)格。</h4><el-tabs v-model="activeName" type="card" @tab-click="handleClick"><el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定時(shí)任務(wù)補(bǔ)償" name="fourth">定時(shí)任務(wù)補(bǔ)償</el-tab-pane></el-tabs><h1>卡片化-帶邊框樣式的標(biāo)簽頁</h1><h4>只需要設(shè)置type屬性為"border-card就可以使選項(xiàng)卡改變?yōu)閹н吙驑邮降臉?biāo)簽頁風(fēng)格。</h4><el-tabs type="border-card"><el-tab-pane label="用戶管理">用戶管理</el-tab-pane><el-tab-pane label="配置管理">配置管理</el-tab-pane><el-tab-pane label="角色管理">角色管理</el-tab-pane><el-tab-pane label="定時(shí)任務(wù)補(bǔ)償">定時(shí)任務(wù)補(bǔ)償</el-tab-pane></el-tabs></div> </template><script> export default {data () {return {activeName: 'first'}},methods: {handleClick (tab, event) {console.log(tab, event)}} } </script>

2.5. 在components下創(chuàng)建PositionTabs.vue

<template><div><h1>位置</h1><h4>可以通過tab-position設(shè)置標(biāo)簽的位置。標(biāo)簽一共有四個(gè)方向的設(shè)置tabPosition="left|right|top|bottom"。</h4><el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"><el-radio-button label="top">top</el-radio-button><el-radio-button label="right">right</el-radio-button><el-radio-button label="bottom">bottom</el-radio-button><el-radio-button label="left">left</el-radio-button></el-radio-group><el-tabs :tab-position="tabPosition" style="height: 200px;"><el-tab-pane label="用戶管理">用戶管理</el-tab-pane><el-tab-pane label="配置管理">配置管理</el-tab-pane><el-tab-pane label="角色管理">角色管理</el-tab-pane><el-tab-pane label="定時(shí)任務(wù)補(bǔ)償">定時(shí)任務(wù)補(bǔ)償</el-tab-pane></el-tabs></div> </template><script> export default {data () {return {tabPosition: 'left'}} } </script>

2.6. 在components下創(chuàng)建SlotTabs.vue

<template><div><h1>自定義標(biāo)簽頁</h1><h4>可以通過具名slot來實(shí)現(xiàn)自定義標(biāo)簽頁的內(nèi)容。</h4><el-tabs type="border-card"><el-tab-pane><span slot="label"><i class="el-icon-date"></i> 我的行程</span>我的行程</el-tab-pane><el-tab-pane label="消息中心">消息中心</el-tab-pane><el-tab-pane label="角色管理">角色管理</el-tab-pane><el-tab-pane label="定時(shí)任務(wù)補(bǔ)償">定時(shí)任務(wù)補(bǔ)償</el-tab-pane></el-tabs></div> </template>

2.7. 在components下創(chuàng)建EditableTabs.vue

<template><div><h1>動(dòng)態(tài)增減標(biāo)簽頁</h1><h4>edit點(diǎn)擊tabs的新增按鈕或tab被關(guān)閉后觸發(fā)。</h4><el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"><el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane></el-tabs></div> </template><script> export default {data () {return {editableTabsValue: '2',editableTabs: [{title: 'Tab 1',name: '1',content: 'Tab 1 content'}, {title: 'Tab 2',name: '2',content: 'Tab 2 content'}],tabIndex: 2}},methods: {handleTabsEdit (targetName, action) {if (action === 'add') {const newTabName = ++this.tabIndex + ''this.editableTabs.push({title: 'New Tab',name: newTabName,content: 'New Tab content'})this.editableTabsValue = newTabName}if (action === 'remove') {const tabs = this.editableTabslet activeName = this.editableTabsValueif (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {const nextTab = tabs[index + 1] || tabs[index - 1]if (nextTab) {activeName = nextTab.name}}})}this.editableTabsValue = activeNamethis.editableTabs = tabs.filter(tab => tab.name !== targetName)}}} } </script>

2.8. 在components下創(chuàng)建AddRemoveTabs.vue

<template><div><h1>自定義增加標(biāo)簽頁觸發(fā)器</h1><h4>tab-add點(diǎn)擊tabs的新增按鈕后觸發(fā)。tab-remove點(diǎn)擊tab移除按鈕后觸發(fā)。</h4><el-tabs v-model="editableTabsValue" type="card" addable closable @tab-add="addTab" @tab-remove="removeTab"><el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane></el-tabs></div> </template><script> export default {data () {return {editableTabsValue: '2',editableTabs: [{title: 'Tab 1',name: '1',content: 'Tab 1 content'}, {title: 'Tab 2',name: '2',content: 'Tab 2 content'}],tabIndex: 2}},methods: {addTab (targetName) {const newTabName = ++this.tabIndex + ''this.editableTabs.push({title: 'New Tab',name: newTabName,content: 'New Tab content'})this.editableTabsValue = newTabName},removeTab (targetName) {const tabs = this.editableTabslet activeName = this.editableTabsValueif (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {const nextTab = tabs[index + 1] || tabs[index - 1]if (nextTab) {activeName = nextTab.name}}})}this.editableTabsValue = activeNamethis.editableTabs = tabs.filter(tab => tab.name !== targetName)}} } </script>

2.9. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/Tabs

2.10. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/TypeTabs?

2.11. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/PositionTabs

2.12. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/SlotTabs?

?

2.13. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/EditableTabs

?

2.14. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/AddRemoveTabs

?

總結(jié)

以上是生活随笔為你收集整理的034_Tabs标签页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。