Vue to realize the instance of right-click pop-up div

Right-click a div to pop up a pop-up box, which has functions such as delete;

Go directly to the code:

<div id="app">
  <div v-if="showContextMenu" class="context-menu" :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }">
    这是右键菜单
  </div>
  <div class="content" @contextmenu.prevent.stop="rightClick($event)" @click="showContextMenu = false">
    右击此处弹出菜单
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    showContextMenu: false,
    contextMenuTop: 0,
    contextMenuLeft: 0
  },
  methods: {
    rightClick(event) {
      this.showContextMenu = true;
      this.contextMenuTop = event.pageY;
      this.contextMenuLeft = event.pageX;
    }
  }
})

In this example, we use the Vue.js framework to implement the logic of the right-click menu.

We have two div elements, one is the content area and the other is the context menu. We use v-ifthe command to control the display and hiding of the right-click menu, and use :stylethe binding property to set the position of the right-click menu.

@contextmenu.prevent.stopAn event listener is added on the content area's to prevent the native right-click menu from appearing, and rightClickthe method is called to handle the right-click menu logic.

A @clickevent to ensure that the context menu is hidden when the content area is clicked.