vue原生方法自定义右键菜单

实现Vue原生方法自定义右键菜单的步骤如下：

1. 绑定右键事件

首先需要在需要自定义右键菜单的元素上绑定右键事件，可以使用@contextmenu指令来绑定：

<div @contextmenu="showContextMenu"></div>

其中showContextMenu是一个自定义方法，在右键菜单需要显示时会被调用。

2. 阻止默认行为

为了防止默认的右键菜单弹出，需要在绑定的右键事件上添加prevent修饰符：

<div @contextmenu.prevent="showContextMenu"></div>

3. 显示菜单

在showContextMenu方法中，需要手动创建并显示菜单：

showContextMenu(e) {
  e.preventDefault()
  const menu = new Menu()
  // ...
  menu.popup()
}

其中Menu是Electron中的构造函数，用于创建菜单实例。popup方法用于显示菜单。

4. 创建菜单项

可以使用MenuItem构造函数创建菜单项，然后将菜单项添加到菜单中：

const menuItem = new MenuItem({
  label: '菜单项1',
  click: () => {
    // 点击菜单项1时触发的事件
  }
})
menu.append(menuItem)

可以添加多个菜单项，并使用嵌套的SubMenu来创建子菜单：

const subMenu = new Menu()
subMenu.append(new MenuItem({
  label: '子菜单项1',
  click: () => {
    // 点击子菜单项1时触发的事件
  }
}))
menu.append(new MenuItem({
  label: '菜单项2',
  submenu: subMenu
}))

这样就创建了一个包含两个菜单项和一个子菜单的菜单。

5. 完整代码示例

下面是一个完整的示例代码，用于演示如何使用Vue原生方法自定义右键菜单：

<template>
  <div @contextmenu.prevent="showContextMenu">
    右键点击此处显示菜单
  </div>
</template>

<script>
import { Menu, MenuItem } from 'electron'

export default {
  methods: {
    showContextMenu(e) {
      e.preventDefault()
      const menu = new Menu()
      menu.append(new MenuItem({
        label: '菜单项1',
        click: () => {
          console.log('点击了菜单项1')
        }
      }))
      const subMenu = new Menu()
      subMenu.append(new MenuItem({
        label: '子菜单项1',
        click: () => {
          console.log('点击了子菜单项1')
        }
      }))
      menu.append(new MenuItem({
        label: '菜单项2',
        submenu: subMenu
      }))
      menu.popup()
    }
  }
}
</script>

运行上述代码，右键点击页面上的元素，即可看到自定义的右键菜单。