主要用到 oncontextmenu 事件:
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
下面是自己写的小demo:
// prevent 禁用浏览器默认的右键事件
<div @contextmenu.prevent="rightClick">
<div class="rightList">
<div class="list_item" @click="rightOneClick">你瞅啥</div>
<div class="list_item">抽你咋地</div>
<div class="list_item">你在瞅一下</div>
<div class="list_item">瞅瞅就瞅瞅</div>
</div>
</div>
<style>
#app {
position: relative;
width: 100%;
height: 100vh;
background-color: #eee;
box-sizing: border-box;
padding: 30px;
}
.rightList {
position: absolute;
left: 100px;
top: 100px;
width: 70px;
background-color: #fff;
padding: 10px 0;
display: none;
}
.list_item {
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #333;
}
.list_item:hover {
background-color: #ddd;
cursor: default;
}
</style>
rightClick(e) {
// 获取元素
let rightlist = document.getElementsByClassName("rightList");
// 再次点击之前先清除之前的
rightlist[0].style.display = 'none';
// 点击其他地方清除
let coverHidden = () => {
rightlist[0].style.display = 'none'
document.removeEventListener('click',coverHidden,false)
}
let xw = e.offsetX;
let yw = e.offsetY;
rightlist[0].style.left = (xw - 35) + 'px';
rightlist[0].style.top = (yw - 50) + 'px';
// 显示
rightlist[0].style.display = 'block';
document.addEventListener('click', coverHidden)
return false;
},
注意事项:
每次点击之前先清除之前的。
根据点击右键元素来定义右键菜单展示位置。
需阻止浏览器默认的右键事件。