tag标签实现关闭左侧、关闭右侧、关闭其他、全部关闭标签的功能

1.效果图(当鼠标悬停到标签上时，出现以下四个功能)

2.效果说明

现在有四个tag标签（tag1，tag2，tag3，tag4），如下图，选中的是tag2标签，我们需要新增一个按钮实现关闭tag2左侧标签，关闭tag2右侧标签，关闭除了tag2以外的其他标签，关闭全部标签(回到home页)

 四个tag标签存放在pageTags数组里

pageTags:[
    {
        path: '/tag1',
        name: 'tag1',
    },
    {
        path: '/tag2',
        name: 'tag2',
    },
    {
        path: '/tag3',
        name: 'tag3',
    },
    {
        path: '/tag4',
        name: 'tag4',
    },
]

 当前选中的是tag2标签，存放在currentTag里

currentTag:{
    path: '/tag2',
    name: 'tag2'
}

 3.代码展示

新增关闭按钮的html

<el-dropdown trigger="hover" @command="closeCommand">
  <span>
    <i class="el-icon-circle-close"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="item in closeMenu" :key="item.value" :command="item.value">{{item.name}}</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

data(){
  return{
    closeMenu:[
      {
         name: '关闭左侧',
         value: 'left',   
      },
      {
         name: '关闭右侧',
         value: 'right',   
      },
      {
         name: '关闭其他',
         value: 'others',   
      },
      {
         name: '全部关闭',
         value: 'all',   
      },
    ]
  }
}

methods:{
  closeCommand(command){
    // 当前选中标签tag2的下标
    const currentIndex = this.pageTags.findIndex((i) =>(i===this.currentTag))
    let pageTags = []
    switch (command) {
       // 关闭tag2左侧标签
       case 'left':
          pageTags = this.pageTags.slice(currentIndex,this.pageTags.length-1)
          break
       // 关闭tag2右侧标签
       case 'right':
          pageTags = this.pageTags.slice(0,currentIndex)
          break
       // 关闭其他标签
       case 'others':
          pageTags = [this.currentTag]
          break
       // 关闭全部标签 回到home页
       case 'all':
          this.currentTag = {
            path: '/home',
            name: 'home',
          }
          pageTags = [this.currentTag]
          break
       default:
          console.log('a')
    }
  }
}

本文用来记录开发过程中遇到的问题，如有侵权，请联系删除