自定义右键
<template>
<div class="tree">
<span
class="tree-item"
v-for="(item, index) in tree"
:key="index"
@contextmenu.prevent="openMenu(item, $event)">
{{ item.name }}
</span>
<div class="popover" :style="style" v-if="isShowPopover">
<div v-for="(item, index) in popoverList" :key="index" class="popover-item" @click="menuClick(item)">
<i :class="'el-icon-' + item.type"></i>
{{ item.name }}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'NotFound',
computed: {
style () {
return {
left: this.popoverLeft + 'px',
top: this.popoverTop + 'px'
}
}
},
data () {
return {
tree: [
{ name: '一级1' },
{ name: '一级2' }
],
popoverLeft: 0,
popoverTop: 0,
isShowPopover: true,
popoverList: [
{ name: '新增', type: 'circle-plus-outline' },
{ name: '编辑', type: 'edit' },
{ name: '删除', type: 'delete' }
]
}
},
methods: {
openMenu (item, event, index) {
this.curItem = item
this.curIndex = index
const clientWidth = document.body.clientWidth
const clientHeight = document.body.clientHeight
if (event.clientX + 100 >= clientWidth) {
this.popoverLeft = clientWidth - 100
} else {
this.popoverLeft = event.clientX
}
if (event.clientY + 178 >= clientHeight) {
this.popoverTop = clientHeight - 178
} else {
this.popoverTop = event.clientY
}
this.isShowPopover = true
},
closeMenu () {
this.isShowPopover = false
},
menuClick (row) {
console.log(row)
}
},
watch: {
isShowPopover (val) {
if (val) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
}
}
</script>
<style lang="scss" scoped>
.tree {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.tree-item {
width: 200px;
line-height: 40px;
border: 1px solid red;
text-align: center;
margin-top: 10px;
cursor: pointer;
}
.popover {
width: 100px;
height: auto;
position: fixed;
background: #fff;
border: 1px solid #ddd;
padding: 0 10px;
box-shadow: 0 0 2px 0 #ccc;
.popover-item {
border-bottom: 1px solid #efefef;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.popover-item:last-child{
border-bottom: none;
}
}
}
</style>
屏蔽右键菜单
<div class="animation-box-pdf" @contextmenu="showContextMenu"></div>
showContextMenu(event) {
event.preventDefault()
},