parent
8c0c2e4213
commit
7f3fc93d8a
9 changed files with 258 additions and 344 deletions
@ -1,186 +0,0 @@ |
||||
<template> |
||||
<div class="tags" v-if="showTags"> |
||||
<ul> |
||||
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> |
||||
<router-link :to="item.path" class="tags-li-title"> |
||||
{{item.title}} |
||||
</router-link> |
||||
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> |
||||
</li> |
||||
</ul> |
||||
<div class="tags-close-box"> |
||||
<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 size="small" 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> |
||||
</template> |
||||
|
||||
<script> |
||||
import bus from '@/libs/bus'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
tagsList: [] |
||||
} |
||||
}, |
||||
methods: { |
||||
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('/'); |
||||
} |
||||
}, |
||||
// 关闭全部标签 |
||||
closeAll(){ |
||||
this.tagsList = []; |
||||
this.$router.push('/'); |
||||
}, |
||||
// 关闭其他标签 |
||||
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 >= 8){ |
||||
this.tagsList.shift(); |
||||
} |
||||
this.tagsList.push({ |
||||
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('/'); |
||||
} |
||||
this.tagsList.splice(i, 1); |
||||
break; |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
|
||||
|
||||
<style> |
||||
.tags { |
||||
position: relative; |
||||
height: 30px; |
||||
overflow: hidden; |
||||
background: #fff; |
||||
padding-right: 120px; |
||||
box-shadow: 0 5px 10px #ddd; |
||||
} |
||||
|
||||
.tags ul { |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.tags-li { |
||||
float: left; |
||||
margin: 3px 5px 2px 3px; |
||||
border-radius: 3px; |
||||
font-size: 12px; |
||||
overflow: hidden; |
||||
cursor: pointer; |
||||
height: 23px; |
||||
line-height: 23px; |
||||
border: 1px solid #e9eaec; |
||||
background: #fff; |
||||
padding: 0 5px 0 12px; |
||||
vertical-align: middle; |
||||
color: #666; |
||||
-webkit-transition: all .3s ease-in; |
||||
-moz-transition: all .3s ease-in; |
||||
transition: all .3s ease-in; |
||||
} |
||||
|
||||
.tags-li:not(.active):hover { |
||||
background: #f8f8f8; |
||||
} |
||||
|
||||
.tags-li.active { |
||||
color: #fff; |
||||
} |
||||
|
||||
.tags-li-title { |
||||
float: left; |
||||
max-width: 80px; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
margin-right: 5px; |
||||
color: #666; |
||||
} |
||||
|
||||
.tags-li.active .tags-li-title { |
||||
color: #fff; |
||||
} |
||||
|
||||
.tags-close-box { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
box-sizing: border-box; |
||||
padding-top: 1px; |
||||
text-align: center; |
||||
width: 110px; |
||||
height: 30px; |
||||
background: #fff; |
||||
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); |
||||
z-index: 10; |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue