1.在需要添加右键的页面,绑定contextmenu事件(阻止浏览器默认事件,添加自定义事件)
<xx组件 @contextmenu.prevent.native="openMenu($event)">
2.在页面编写右键菜单的内容
<ul
v-show="visible"
:style="contextmenuStyle"
class="contextmenu"
>
<li @click="setBack">
置于底层
</li>
<li @click="setTop">
置于顶层
</li>
</ul>
3.定义属性变量
private contextmenuStyle: any={}
private visible=false;
4.创建监听事件,来触发关闭右键菜单的方法
@Watch('visible')
private visibleChange () {
if (this.visible) { // 显示的时候 添加一个点击事件 用于隐藏右键的内容
window.addEventListener('click', this.closeMenu);
} else {
window.removeEventListener('click', this.closeMenu);
}
}
5.打开和关闭右键菜单的两个方法
// 鼠标右键
private async openMenu (e) {
this.contextmenuStyle = {
left: e.offsetX + 'px',
top: e.offsetY + 'px'
};
this.visible = true;
}
private setBack () {
this.drawer.sendToBack();
}
private setTop () {
this.drawer.setTop();
}
private closeMenu () {
this.visible = false;
}
6.样式
<style lang='scss' scoped>
@import '~@/css/variable';
.contextmenu {
margin: 0;
background: #eeeded;
opacity: 0.9;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px;
border-radius: 4px;
font-size: 12px;
color: #505050;
border: 1px solid $color-border;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
margin: 0;
padding: 2px 10px;
border-radius: 2px;
cursor: pointer;
}
.contextmenu li:hover {
background: $color-button-disabled-hover;
color: $color-basic;
}
</style>