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')
}
}
}
本文用来记录开发过程中遇到的问题,如有侵权,请联系删除