http://www.jq22.com/jquery-info17973
http://www.jq22.com/demo/elementTab201801262311/
插件描述：基於elementui標簽選項卡是一款vue選項卡插件制作多種標簽選項卡，水平垂直選項卡切換代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基於element-ui標簽選項卡</title>
<link rel="stylesheet" href="css/element.min.css">
</head>
<body>
<div id="myVue">
<h2>通用標簽頁，基於element-ui</h2>
<p>1.基礎用法</p>
<template>
<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="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
</el-tabs>
</template>
<p>2.選項卡樣式</p>
<template>
<el-tabs v-model="activeName2" 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="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
</el-tabs>
</template>
<p>3.卡片化</p>
<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="定時任務補償">定時任務補償</el-tab-pane>
</el-tabs>
<p>4.位置</p>
<template>
<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="定時任務補償">定時任務補償</el-tab-pane>
</el-tabs>
</template>
<p>5.自定義標簽頁</p>
<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="定時任務補償">定時任務補償</el-tab-pane>
</el-tabs>
<p>6.動態增減標簽頁</p>
<div style="margin-bottom: 20px;">
<el-button size="small" @click="addTab(editableTabsValue2)">
add tab
</el-button>
</div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
<el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name">
{{item.content}}
</el-tab-pane>
</el-tabs>
</div>
<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script src="js/element.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#myVue',
data() {
return {
activeName: 'second',
activeName2: 'first',
tabPosition: 'top',
editableTabsValue2: '2',
editableTabs2: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue2 = newTabName;
},
removeTab(targetName) {
let tabs = this.editableTabs2;
let activeName = this.editableTabsValue2;
if(activeName === targetName) {
tabs.forEach((tab, index) => {
if(tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if(nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue2 = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
}
}
})
</script>
</body>
</html>