<template>
<section>
<div class="navTabList el-tabs__nav-scroll" id="tabsNav" v-if="showTags">
<ul class="nt-ul el-tabs__nav" id="tabsNavList">
<li v-for="(item,index) in tagsList" :class="{'is-active': isActive(item.path)}" :key="index">
<router-link :to="item.path" class="tags-li-title">
{{item.title}}
</router-link>
<i class="el-tag__close el-icon-close" @click="closeTags(index)"></i></li>
</ul>
<div class="pull-right navTab_right">
<el-button-group>
<el-button size="mini" icon="el-icon-arrow-left" @click="tabsPrev()"></el-button>
<el-button size="mini" icon="el-icon-arrow-right" @click="tabsNext()"></el-button>
</el-button-group>
<el-dropdown @command="handleTags">
<el-button size="mini" type="primary">
标签选项
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="other">关闭其他页面</el-dropdown-item>
<el-dropdown-item command="all">关闭所有页面</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</section>
</template>
<script>
import bus from './bus'
export default {
data() {
return {
tagsList: [],
counter: '0'
}
},
methods: {
tabsNext() {
let tabNav = document.getElementById('tabsNav')
let tabNavList = document.getElementById('tabsNavList')
let tabNavW = tabNav.clientWidth
let tabNavListW = tabNavList.clientWidth
if (tabNavW < tabNavListW && this.counter + tabNavW - 210 < tabNavListW) {
this.counter = parseInt(this.counter) + parseInt(tabNavW) - 210
tabNavList.style.transform = 'translateX(' + '-' + this.counter + 'px)'
} else {
}
},
tabsPrev() {
let tabNav = document.getElementById('tabsNav')
let tabNavList = document.getElementById('tabsNavList')
let tabNavW = tabNav.clientWidth
if (tabNavW <= this.counter + tabNavW - 210) {
this.counter = parseInt(this.counter) - parseInt(tabNavW) + 210
tabNavList.style.transform = 'translateX(' + '-' + this.counter + 'px)'
} else if (this.counter !== 0) {
this.counter = 0
tabNavList.style.transform = 'translateX(' + '0' + 'px)'
} else {
}
},
isActive(path) {
return path === this.$route.fullPath
},
// 关闭单个标签
closeTags(index) {
const delItem = this.tagsList.splice(index, 1)[0]
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]
if (item) {
delItem.path === this.$route.fullPath && this.$router.push(item.path)
} else {
this.$router.push('/dashboard')
}
},
// 关闭全部标签
closeAll() {
this.tagsList = []
this.$router.push('/dashboard')
},
// 关闭其他标签
closeOther() {
const curItem = this.tagsList.filter(item => {
return item.path === this.$route.fullPath
})
this.tagsList = curItem
},
// 设置标签
setTags(route) {
const isExist = this.tagsList.some(item => {
return item.path === route.fullPath
})
if (!isExist) {
if (this.tagsList.length >= 99) {
this.tagsList.shift()
}
this.tagsList.unshift({
title: route.meta.title,
path: route.fullPath,
name: route.matched[1].components.default.name
})
}
// bus.$emit('tags', this.tagsList)
},
handleTags(command) {
command === 'other' ? this.closeOther() : this.closeAll()
}
},
computed: {
showTags() {
return this.tagsList.length > 0
}
},
watch: {
$route(newValue, oldValue) {
this.setTags(newValue)
}
},
created() {
this.setTags(this.$route)
// 监听关闭当前页面的标签页
bus.$on('close_current_tags', () => {
for (let i = 0, len = this.tagsList.length; i < len; i++) {
const item = this.tagsList[i]
if (item.path === this.$route.fullPath) {
if (i < len - 1) {
this.$router.push(this.tagsList[i + 1].path)
} else if (i > 0) {
this.$router.push(this.tagsList[i - 1].path)
} else {
this.$router.push('/dashboard')
}
this.tagsList.splice(i, 1)
}
}
})
}
}
</script>
<style scoped>
.navTabList {
padding-right: 210px;
height: 34px;
line-height: 34px;
background: #f4f4f4;
margin-bottom: 10px;
font-size: 12px;
background-color: white;
box-shadow:0 5px 10px #ddd ;
}
.navTabList .nt-ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.navTabList .nt-ul li {
display: inline-block;
margin: 1px 5px 2px 1px;
border-radius: 3px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
height: 24px;
line-height: 24px;
border: 1px solid #e9eaec;
background: #fff;
padding: 2px 12px 0 12px;
vertical-align: middle;
color: #666;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.navTabList .nt-ul li:before {
content: '';
1px;
height: 23px;
position: absolute;
left: 0;
top: 7px;
border-right: 1px solid #e4e4e4;
}
.navTabList .nt-ul li:first-child:before {
display: none;
}
.navTabList .nt-ul li i {
position: relative;
font-size: 12px;
0;
height: 14px;
vertical-align: middle;
line-height: 15px;
overflow: hidden;
top: -1px;
right: -10px;
}
.navTabList .nt-ul li i {
14px;
}
.navTabList .nt-ul li a {
display: inline-block;
color: #999;
}
.navTabList .nt-ul .is-active {
padding: 0 13px;
/*margin-top: 2px;*/
height: 30px;
line-height: 30px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: #409eff;
font-weight: bold;
color: white;
}
.navTabList .nt-ul .is-active a{
color: white;
}
.navTabList .nt-ul .is-active:before {
display: none;
}
.navTabList .nt-ul .is-active + li:before {
display: none;
}
.navTabList .nt-ul .is-active i {
14px;
}
.navTabList .navTab_right {
position: absolute;
height: 28px;
right: 0;
line-height: normal;
padding: 3px 6px;
background: white;
box-shadow:0 5px 10px #ddd ;
z-index: 2;
}
.navTabList .navTab_right .el-button-group {
vertical-align: top;
}
.navTabList .el-button--mini {
font-size: 12px;
/*padding: 4px 6px;*/
}
</style>
先上代码 可能一脸懵逼 ，接下来我说说我大概的思路：
首先基于element-ui框架el-tabs 组建
然后用watch 来监听路由
当监听到路由变化时和数组中路由列表比较如果有就不做处理，没有的话就新增路由到数组
删除的话就是从路由列表中删除该项
然后样式的话我做了ui上的调整