vue3中的右键菜单有什么参考没？

Question

老师好，
你在《Electron+React+七牛云 实战跨平台桌面应用》中封装了一个contextMenu的组件。对于vue3，我想封装一个类似的组件，但网上找不到适合的参考，特向老师求助。谢谢！

Answer 1

张轩 2021-09-02 08:44:30

同学你好 找到一个 支持 vue3 的写的很不错，star 也挺多，请看：https://github.com/heynext/v-contextmenu

当然这个有些复杂，假如你想要一个非常简单的组件的话

一个简单的思路：

1 组件 ContextMenu，一个属性是菜单里面的选项（可以是 Array），样式默认关闭（css控制）

2 document 添加 contextmenu 事件，右键点击触发，判断当前触发元素和它的父元素有没有特殊的 class（用来 trigger 这个 div 展示），有，display block

3 document 上添加一个 click，点击以后 display none

• 提问者 蝴蝶是保护动物 #1

  非常感谢！

• 提问者 蝴蝶是保护动物 #2

  这个库大体上可以满足要求，但发现有两点不好的：
  1. 需要添加的东西稍微有点多，不如你在react课程中封的那么优雅；
  2. 在v-for循环中使用有bug: 每个v-contextmenu-ite得到的都是最后一个dom元素的信息。

• 张轩 回复 提问者 蝴蝶是保护动物 #3

  对 所以我建议你使用我的思路简单写一个 其实很简单