效果展示(后台管理系统中常用)
如果你也需要如图所示的效果 直接把下面的代码粘贴过去即可
不需要父组件传递任何参数 十分好用；
基本思路:
监听 $route 路由信息；
把当前的信息添加至数组，循环遍历数组
当前的active样式， 也是根据 当前的$route 里的path去决定的
代码写的很清楚了:
Tag
<template>
<div class="tag" v-if="showTags">
<ul>
<li class="tags-li" v-for="(item,index) in list" :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="handleTags">
<el-dropdown @command="handleTags" size="mini" type="primary">
<el-button type="primary">
标签选项<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
export default {
name: "Tag",
data() {
return {
list: []
}
},
computed: {
// 显示隐藏面包屑
showTags() {
return this.list.length > 0;
}
},
watch: {
// 通过 监听路由的变化
$route(newValue, oldValue) {
this.setTages(newValue)
}
},
methods: {
// 选中状态 返回 true false
isActive(path) {
return path === this.$route.fullPath;
},
// 标签选项 关闭单个 关闭所有
handleTags(command) {
command === 'all' ? this.closeAll() : this.closeOther()
},
// 点击关闭 单个 按钮
closeTags(index) {
const delItem = this.list.splice(index, 1)[0]; // 获取当前的
const item = this.list[index] ? this.list[index] : this.list[index - 1]; // 获取到下一个
if (item) {
// 有下一个 跳到下一个
delItem.path === this.$route.fullPath && this.$router.push(item.path);
} else {
// 没有 去 home页面
this.$router.push('/Home');
}
},
// 点击关闭 所有
closeAll() {
this.list = [];
this.$router.push('/Home');
},
// 点击关闭其他
closeOther() {
let currentList = this.list.filter((ele) => {
return ele.path === this.$route.fullPath
});
this.list = currentList
},
// 展示的数组
setTages(newValue) {
const isExist = this.list.some(item => {
return item.path === newValue.fullPath;
});
if (!isExist) {
if (this.list.length >= 8) {
this.list.shift();
}
this.list.push({
title: newValue.meta.title,
path: newValue.path,
name: newValue.matched[1].components.default.name
})
}
}
}
}
</script>
<style scoped lang="scss">
.handleTags > > > .el-button {
padding: 7px 0;
font-size: 12px;
}
.tag {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.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: skyblue;
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>
在父组件中引入配置即可使用