vue 来实现右击弹出div的实例

右击一个div出现弹框，里面有删除等功能；

直接上代码：

<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;
    }
  }
})

在这个例子中，我们使用了 Vue.js 框架来实现右键菜单的逻辑。

我们有两个 div 元素，一个是内容区域，另一个是右键菜单。我们使用 v-if 指令来控制右键菜单的显示和隐藏，并用 :style 绑定属性设置右键菜单的位置。

在内容区域的 @contextmenu.prevent.stop 上添加了一个事件侦听器，以防止原生右键菜单的出现，并且调用了 rightClick 方法来处理右键菜单的逻辑。

在内容区域上还添加了一个 @click 事件侦听器，以确保在单击内容区域时隐藏右键菜单。