鼠标右键 自定义

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 '[email protected]/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>