017、Vue动态tag标签

1、先看效果

2、代码

<template><div class = "tags"><el-tag size="medium"closable v-for="item,index in tags":key="item.path":effect="item.title==$route.name?'dark':'plain'"@click="goTo(item.path)"@close = "close(index)":disable-transitions="true"><i class="cir" v-show="item.title==$route.name"></i>{{item.title}}</el-tag></div>
</template><script>
import { Tag } from 'element-ui';export default{data(){return {tags:[{title:"layout",path:"/layout",isActive: true,}]}},methods:{goTo(path){this.$router.replace({path: (path == '/' || path == undefined ? '/Index' : path)});},close(index){const name = this.tags[index].title;this.tags.splice(index,1);if(this.tags.length==0) return;//如果关闭当前页，则激活最后一个标签页const path = this.tags[this.tags.length-1].path;if(name===this.$route.name&&this.tags.length!=0){this.$router.replace({path: (path == '/' || path == undefined ? '/Index' : path)});}}},watch:{$route:{immediate:true,handler(val,oldVal){console.log(val);const bool = this.tags.find(item=>{return item.path == val.path;});if(!bool){this.tags.push({title: val.name,path: val.path});}}}}}
</script><style scoped>.tags .el-tag{padding-left: 10px;padding-top: 0px;margin-right: 5px;.cir{width: 8px;height: 8px;margin-right: 4px;background-color: #fff;border-radius: 50%;display: inline-block;}}</style>