017、Vue动态tag标签

1、先看效果

2、代码

<template>
  <div class = "tags">
    <el-tag size="medium"
    :closable="index !== 0" 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>

3、特殊配置

第一个tag标签不可关闭

:closable="index !== 0"