vue添加自定义右键菜单的完整实例

首先我们需要了解一下什么是自定义右键菜单。在Vue项目中，浏览器默认的右键菜单可能不够符合我们的需求，此时我们可以自定义一个右键菜单，实现更加灵活的交互效果。下面就是一个完整的Vue自定义右键菜单实例：

步骤1：html模板中定义右键菜单组件

使用定义一个ContextMenu（右键菜单）组件：

<template>
  <div v-show="isVisible" class="context-menu" :style="{top: top+'px', left: left+'px'}">
    <div v-for="(item, index) in items" :key="index" class="context-menu-item" @click="handleClick(index)">
      {{item}}
    </div>
  </div>
</template>

在这个组件中，我们使用 v-show 条件渲染属性来控制它的显示和隐藏，使用 top 和 left 样式来控制其定位位置。然后使用 v-for 遍历传入的菜单项列表，使用 @click 事件监听菜单项的点击事件，实现点击菜单项后的交互效果。

步骤2：定义右键菜单实例

<template>
  <div @contextmenu.prevent="handleContextMenu" @click="handleClick">
    <div>Hello World!</div>
    <ContextMenu :isVisible="isVisible" :top="top" :left="left" :items="menuItems"/>
  </div>
</template>

在这个右键菜单实例中，我们先在父级 DOM 上定义 @contextmenu.prevent 事件监听器，用于捕捉右键菜单事件并阻止浏览器默认的行为。然后我们通过使用 ContextMenu 组件来渲染右键菜单，并传入相应的参数，如 isVisible、top、left 和 items 等。最后，我们在 @click 事件监听器中处理其他的交互逻辑。

步骤3：实现右键菜单显示和隐藏逻辑

<script>
import ContextMenu from './ContextMenu.vue'

export default {
  components: {
    ContextMenu
  },
  data () {
    return {
      isVisible: false,
      top: 0,
      left: 0,
      menuItems: ['菜单项1', '菜单项2', '菜单项3']
    }
  },
  methods: {
    handleClick () {
      // 处理其他的点击事件
    },
    handleContextMenu (event) {
      event.preventDefault() // 阻止默认菜单显示
      this.isVisible = true
      this.top = event.clientY + 'px'
      this.left = event.clientX + 'px'
      window.addEventListener('click', this.handleHide)
    },
    handleHide () {
      this.isVisible = false
      window.removeEventListener('click', this.handleHide)
    },
    handleClick (index) {
      console.log(`你点击了第${index+1}个菜单项`)
    }
  }
}
</script>

在这个 Vue 组件中，我们定义了一些点击事件处理方法，比如 handleClick、handleContextMenu、handleHide 和 handleClick。其中，handleContextMenu 是关键的右键菜单显示逻辑处理方法，当浏览器触发右键菜单事件时，我们通过调用该方法来使菜单显示出来，并把菜单的位置定位到鼠标指针的位置上。同时我们还把一个 click 事件监听器添加到 window 对象上，用于响应其他的点击行为使菜单隐藏。

当菜单中的菜单项被点击时，我们就可以在 handleClick 方法中处理相应的交互逻辑，并将点击的菜单项的下标值传入进行处理。