Right mouse button customization

1. Right click the page that needs to be added , binding contextmenu event （ Block browser default Events , Add custom events ）

<xx Components  @contextmenu.prevent.native="openMenu($event)">

2. Write the contents of the right-click menu on the page

<ul
   v-show="visible"
   :style="contextmenuStyle"
   class="contextmenu"
 >
   <li @click="setBack">
      On the ground floor 
   </li>
   <li @click="setTop">
      Put on top 
   </li>
 </ul>

3. Define attribute variables

private contextmenuStyle: any={
    }
private visible=false;

4. Create a listening event , To trigger the method of closing the right-click menu

@Watch('visible')
private visibleChange () {
    
   if (this.visible) {
     //  On display   Add a click event   Used to hide the contents of the right key 
     window.addEventListener('click', this.closeMenu);
   } else {
    
     window.removeEventListener('click', this.closeMenu);
   }
 }

5. Two methods to open and close the right-click menu

//  Right mouse button 
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

<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>