<template>
<div class="right-footer h100">
<div class="h100 flex a-center j-start flex-row">
<div
class="tag"
v-for="(item,index) in tagList"
:key="index"
@contextmenu.prevent="contextmenu(item,$event,index)"
ref="tagDom"
>
<span class="name">{{item.name}}</span>
<span class="close">x</span>
</div>
<div class="popover" v-if="isShowPopover" :style="computedStyle">
<div class="li" v-for="(item,index) in popoverList" :key="index" @click="sure(item)">{{item.name}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowPopover: false,
popoverLeft: 0,
popoverTop: 0,
popoverList:[
{
name:"刷新",
prop:"reset"
}, {
name:"关闭",
prop:"close"
}, {
name:"关闭其他",
prop:"closeOther"
}, {
name:"关闭所有",
prop:"closeAll"
},
],
tagList: [
{
name: "首页1"
},
{
name: "首页2"
}
]
};
},
computed: {
computedStyle() {
return {
left: `${this.popoverLeft + 5}px`,
top: `${this.popoverTop - 118 + 5}px`
};
}
},
methods: {
contextmenu(item, e, index) {
this.isShowPopover = true;
this.popoverLeft = e.clientX;
this.popoverTop = e.clientY;
},
sure(item){
this.isShowPopover = false
switch(item.prop){
case 'reset':
break
case 'close':
break
case 'closeOther':
break
case 'closeAll':
break
default :
break
}
}
}
};
</script>
<style lang="scss" scoped>
.right-footer {
background: #353a43;
overflow: hidden;
padding-right: 30px;
max-width: calc(100vw - 64px);
.tag {
font-family: PingFangSC-Regular;
font-size: 10px;
color: #ffffff;
letter-spacing: 0.3px;
height: 18px;
line-height: 18px;
cursor: pointer;
padding: 0 10px;
border-right: 1px solid #4b5058;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.name {
display: inline-block;
margin-right: 6px;
}
}
.popover {
position: fixed;
background: #fff;
border-radius: 4px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
color: #333;
font-size: 12px;
font-weight: 400;
list-style-type: none;
margin: 0;
padding: 5px 0;
position: absolute;
z-index: 100;
width: 80px;
height: 118px;
.li {
height: 27px;
line-height: 27px;
cursor: pointer;
padding-left: 16px;
&:hover{
background: #cccccc;
}
}
}
}
</style>
