东西是好东西
文档有点不详细了
main.js 不支持 v-contextmenu 这种写法。
建议支持vContextmenu

菜单能支持添加图标吗？

能否提供一个destroy的API来销毁

期望结果

可以在事件中提供触发结点的数据吗，我在点击一个菜单项的时候，最想拿到的数据是哪个元素触发的，而不是菜单项名称，你的例子中没有提供这项说明

实际结果

可以给出一个获取触发项数据的例子

环境说明

• 组件版本：
• Vue 版本：2.x
• 操作系统及版本：win10
• 浏览器及版本：chrome 59

在chrome下无问题，应该是es6的兼容性问题，修改了webpack配置，对v-contextmenu进行bable-loader处理，然后将import文件，由dist/index.common.js修改为src/index.js 后，ie11可以正常运行。

我是vue2 webpack3 然后有个dll的包 我换成2.8.0就不会报这个错了

如题
"v-contextmenu": "^2.4.0",
"vue": "^2.5.7",

期望结果

在disable状态下，我想自定义时机显示，通过this.$refs.contextmenu.show(Y,X);方法，传入top与left值，菜单在我知道位置显示

实际结果

实际显示位置不在我指定位置，而是一直处于浏览器左上角，也就是top与left为0

复现步骤

this.$refs.contextmenu.show(222,333);简单调用

环境说明

• 组件版本：2.8.1
• Vue 版本：2.5.2
• 操作系统及版本：window10 旗舰版
• 浏览器及版本：版本 78.0.3904.108（正式版本） （64 位）

作者你好，这个组件很好用，但是在循环中引用时会有一些bug，由于需要循环显示组件，无法将
代码抽出循环外。示例代码如下：
<div v-else-if="item.options.item&&item.options.item.options.defaultType==='Array'" :key="disItem.key" v-for="(disItem,disIndex) in models[item.options.item.model]"> <div :class="['clear-item',{'show-item':showClear}]"> <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(models[item.options.item.model],disIndex)"></el-button> </div> <v-contextmenu :ref="${item.key}${disIndex}_contextmenu`">
菜单1
菜单2
菜单3

        <div v-contextmenu="`${item.key}${disIndex}_contextmenu`">
          <DisplayForm :ref="`${item.key}${disIndex}`" :data="item.data" :models="disItem" :remote="remote"/>
        </div>
      </div>`

会出现如下错误信息：
Error in directive contextmenu inserted hook: "TypeError: Cannot read property 'addRef' of undefined"

自己解决方法：
export default { // 之所以用 inserted 而不是 bind，是需要确保 contentmenu mounted 后才进行 addRef 操作 inserted (el, binding, vnode) { **const node= vnode.context.$refs[binding.arg]||vnode.context.$refs[binding.value] const contextmenu = node instanceof Array? node[0]:node** contextmenu.addRef({ el, vnode }) contextmenu.$contextmenuId = el.id || contextmenu._uid // eslint-disable-line no-underscore-dangle }, }
希望作者能够处理下，支持一下循环下的需求，谢谢！

已发布 https://github.com/heynext/v-contextmenu/blob/main/README.md

[email protected]

最新代码在 main 分支

近期将启动该组件新版的开发，着重修复遗留问题和支持新功能，API 会尽可能做到兼容。
有任何关于该组件的想法，欢迎大家留言，我会第一时间记录。

TypeScript

👀 新版本将使用 TypeScript 开发。1️⃣ 现阶段 Vue 已经可以和 TypeScript 进行不错的结合，JSX 虽然不算完美，但是完全可用的。2️⃣ Vue 3.0 将使用 TypeScript 编写，同时带来更完善的 TypeScript 支持。3️⃣ TypeScript 被越来越多的开发者接受和使用，嗯，真香👏。

基于 Vue 3.0 的 Composition API，使用 TypeScript 开发新版本。

需求收集

Bugs

• selected 和 disabled 样式冲突 #52
• contextmenuId 使用时机导致为 undefined #56

Features

• 支持多事件绑定 #54
• 更多场景的 autoHide #50
• 支持自定义 container #44
• 支持多个实例同时展示 #59

Enhancements

• placement 相关优化 #51 #47
• 组件内 contextmenu 事件冲突 #49
• 兼容低版本浏览器 #48
• vnode 更新机制 #43
• 处理 removeRef
• 更多内置主题

计划

优先解决 bug，如果不麻烦的话会同步至 2.x

• 需求收集 2019-03-10
• 启动开发
• v3.0.0 发布
• 单元测试 & CI

当我需要，点击contextmenu的指定项后，需要disable该项时，出现如下效果：

期望结果

实际结果

我希望，当指定项无效时，应该去掉selected的效果

复现步骤

绑定 :disabled="!isDrawing"，点击该项后，将 isDrawing = !isDrawing，会出现上述结果

环境说明

• 组件版本：
• Vue 版本：
• 操作系统及版本：
• 浏览器及版本：

不支持直接引入啊......
打个umd的包吧

@snokier 看到 Contextmenu mounted 的代码的时候 有一点不明白 这里 this.$contextmenuId 应该都是undefined的吧 我看contextmenuId 都是在 指令 inserted的时候才赋值的 。

 mounted () {
      const elm = document.querySelector(this.containerSelector)

      elm.appendChild(this.$el)

      if (window.$$VContextmenu) {
        window.$$VContextmenu[this.$contextmenuId] = this
      } else {
        window.$$VContextmenu = { [this.$contextmenuId]: this }
      }
    },

现在只能 通过左键关闭已经出现的右键菜单，希望能够增加一个 类似于jQuery contextMenu（2.x） 里面的autoHide: true,属性来设置 当鼠标指针移出触发器和菜单项时是否隐藏菜单。 希望楼主 能够看到！

<contextmenu ref="contextmenu" @show="doShow" @hide="doHide" :theme="theme">
<contextmenu-item @click="doClick">刷新

<contextmenu-item @click="openNewSubNode">新增子节点
批量新增子节点
新增前一节点
新增后一节点

编辑节点属性

删除当前节点
删除子节点


向上移动
向下移动
节点迁移

期望结果

例如 对文章列表进行管理 需要知道 获取文章id才可以进行处理
请问如何 获取是哪个文章进行了右键事件

我用的$refs.contextmenu.show()显示的,没用指令
手动的是要我自己判断了吗

然后还有个情况是 我按照这么写大概 , 这块是在一个文件树的组件里 item是每个文件 我把菜单写item下面item就不会显示 item 和菜单换一个位置就没事了?

<item v-for="(item) in data" :key="item.key" :data="item"></item>
<v-contextmenu ref="contextmenu" >
  <v-contextmenu-item @click="openDirOrFile">打开</v-contextmenu-item>
</v-contextmenu>

我封装了你的子菜单和菜单项 ,你的案例的CustomShow.vue, 一开始没有出现菜单, 我调试了一遍, 在一个按钮按下后, 发现在执行了handleShow方法后, 确实出现了, visible等于true, 但是后来, 不知道为什么触发了handleBodyClick(), 就是好像有一些东西点击了菜单外, 引起的隐藏菜单,为什么呢?

<template>
  <div class="example">

    <button @click="handleShow">显示</button>
    <button @click="handleHide">隐藏</button>


    <v-contextmenu ref="contextmenu">
      <v-loopcontextmenu :menu="menu"></v-loopcontextmenu>
    </v-contextmenu>

    <div class="box" ref="box">
      基本菜单
    </div>

  </div>
</template>

<script>

  import directive from '../../common/contextmenu/directive'
  import ContextMenu from "../../common/contextmenu/components/Contextmenu";
  import LoopContextmenu from "../../common/contextmenu/components/LoopContextmenu";

  export default {
    name: 'CustomShow',
    data() {
      return {
        menu: [
          {
            name: '视图',
          }, {
            name: '编辑',
          },
        ]
      }
    },
    methods: {
      handleShow() {
        const targetDimensions = this.$refs.box.getBoundingClientRect();
        const postition = {
          top: Math.random() * targetDimensions.height + targetDimensions.top,
          left: Math.random() * targetDimensions.width + targetDimensions.left,
        }
        this.$refs.contextmenu.show(postition);
      },
      handleHide() {
        this.$refs.contextmenu.hide()
      },
    },
    directives: {
      contextmenu: directive,
    },
    components: {
      "v-contextmenu": ContextMenu,
      "v-loopcontextmenu": LoopContextmenu,
    },
  }
</script>

<style scoped>
  .box {
    width: 100%;
    height: 300px;
  }
</style>

想知道点击的目标元素，目标元素上有绑定的data数据，怎么获取

环境说明

• 组件版本：
• Vue 版本：2.0+
• 操作系统及版本：
• 浏览器及版本：

期望结果

v-contextmenu指令关联的vnode是动态的，当vnode更新后，触发v-contextmenu组件的contextmenu方法时，向外送出的reference.vnode应该是最新的vnode

实际结果

实际上在初始化之后vnode被保存，然后之后就不变了，与实际不对应

export default {
  // 之所以用 inserted 而不是 bind，是需要确保 contentmenu mounted 后才进行 addRef 操作
  inserted (el, binding, vnode) {
    const contextmenu = vnode.context.$refs[binding.arg]

    contextmenu.addRef({ el, vnode })
    contextmenu.$contextmenuId = el.id || contextmenu._uid // eslint-disable-line no-underscore-dangle
  },
}

是不是考虑在加个生命周期函数，在componentUpdated中执行contextmenu.replaceRef之类的方法？保持contextmenu引用的vnode是最新的

期望结果

contextmenu位置可选择相对于某个container定位，避免出现滚动后出现脱离的情况

实际结果

滚动后出现脱离原位置的情况

IE下,无法显示,官方的demo也看不了

期望结果

支持ie

实际结果

不支持ie

复现步骤

1.ie edge 打开官方demo
2.看不到界面
3.根据调试控制台显示,应该是不支持find方法

环境说明

• 组件版本：
• Vue 版本：2.5.16
• 操作系统及版本：win10
• 浏览器及版本：ie edge

id 为 flow-chart 我绑定了一个menu 下面的div 我也绑定了一个menu
默认的事件绑定是fase 从冒泡开始 可是这这里确是从捕获开始
@snokier 请教你一下 会有什么可能造成这样的情况
没有删除 flow-chart 的 事件之前 是这个menu

删除之后

使用代码：

报错：

如果单独拿出来不在v-for里循环就没有问题？ 这个要怎么处理？

我在页面里面有多个元素，都要右键操作，我想确定是在哪个元素上触发的邮件事件，请问改怎么办，是否可以支持动态传参？

<template>
  <div class="example">
    <v-contextmenu ref="contextmenu1" :theme="theme">
      <v-contextmenu-item>菜单1</v-contextmenu-item>
      <v-contextmenu-item>菜单2</v-contextmenu-item>
      <v-contextmenu-item>菜单3</v-contextmenu-item>
    </v-contextmenu>
 <span v-for="(data,index) in datas" :key="index" v-contextmenu:contextmenu1>右键点击此区域{{data}}</span>
  </div>
</template>
<script>
  export default {
    name: 'Multiple',
    props: {
      theme: String,
    },
 data() {
      return {
        datas: []
        }
  },
    mounted() {
      setTimeout(() => {// 模拟异步加载过程，延时
        this.datas = [1, 2, 3, 4]
      }, 2000);
    },
    methods: {},
  }
</script>

当前数据是通过异步加载出来的，则菜单不会挂载到数据上。
如果一开始datas就有数据，就可以，但是我认为菜单应该支持相应数据变化

jsx现在支持用吗

event-type 现在同时只能支持一种事件，希望能够同时支持多种事件， 比如event-type="click,dbclick,contextmenu"

期望结果

右键弹出的自定义菜单中, 在菜单右键后不要弹出系统菜单

实际结果

自定义的右键 菜单 再右击会弹出浏览器的默认菜单 ,加入 @contextmenu.prevent="" 也不起作用

复现步骤

环境说明

• 组件版本：
• Vue 版本：
• 操作系统及版本：
• 浏览器及版本：

期望结果

指令动态绑定ref

实际结果

目前无法动态绑定ref菜单组件

复现步骤

我在循环内部使用您的菜单组件，但是遇到一个问题，指令试过过程中v-contextmenu:如何绑定动态值呢？

环境说明

• 组件版本：最新
• Vue 版本：2.5.2
• 操作系统及版本：mac os最新
• 浏览器及版本：谷歌最新

I need to enable context menu based on variable value, tried like this but this doesn't work:

:v-contextmenu:contextmenu="enableMenu"

Is it possible anyway?

期望结果

list 中每个 item 都注册了 menu，右键某一条菜单出来的时候，隐藏掉其它的菜单

实际结果

list 中每个 item 都注册了 menu，右键某一条菜单出来的时候，其它菜单没有隐藏掉

复现步骤

error in static/js/vendor.5402823ca7092e4b41d2.js from UglifyJs
Unexpected token: punc (() [./~v-contextmenu/dist/index.common.js:7,0][static/js/vendor.5402832ca7092e4b41d2.js:67101,7])

检查了一下，是main.js中的引入导致build报错：
import contextmenu from 'v-contextmenu';
但是dev没有报错，注释掉上面这句再build也没有报错，去掉注释再build就报错，这到底是什么原因

期望结果

队列动画正常

实际结果

对子项添加 v-contextmenu 指令后，动画失效

复现步骤

<transition-group name="sdocs" class="container" tag="div">
      <div
        class="item"
        v-for="sdoc in SdocsLists"
        :key="sdoc._id"
        v-contextmenu:sdocItemContextmenu
      >
      </div>
</transition-group>

环境说明

• 组件版本：最新
• Vue 版本：2.6.10
• 操作系统及版本：Mac & Win
• 浏览器及版本：Chrome

我需要多个不同的元素，右键点开的菜单都一样，然后可以针对的实现关闭其他，关闭全部这样的功能

请教一个问题，就是如果我的内容比较多，需要滚动条往下拉，我一旦拉到下面的内容，右击菜单，菜单定位会到点击位置的右上角，我的菜单比较长，看起来比较丑，怎么调整让菜单一直定位在鼠标点击位置的右下角

期望结果

实际结果

复现步骤

环境说明

• 组件版本：
• Vue 版本：
• 操作系统及版本：
• 浏览器及版本：

<v-contextmenu ref="contextmenu">
<v-contextmenu-item>添加</v-contextmenu-item>
</v-contextmenu>

<div id="box-1" v-contextmenu:contextmenu>用户</div>
<div id="box-2" v-contextmenu:contextmenu>部门</div>

多个div绑定同一个contextmenu时：
如以上代码：当我右键“部门”的div打开菜单，点击添加，此时无法知道到底是点击了“用户”还是“部门”的div。也就是说handleClick (vm, event)事件只返回了contextmenu对象和鼠标事件，并没有返回div对象。

<v-contextmenu-item v-for="mergeType in mergeTypeList" :key="mergeType.index" @click="toggleMergeGroup(mergeType)">
合并{{mergeType}}

开发
$ yarn install
$ yanr dev

yarn not yanr. :P
(因为手机不好推pr...就只能发issue了)

在使用中，使用v-contextmenu:ref指令，绑定了hide事件，代码如下：
<v-contextmenu ref="contextmenu" @show="rightMenuShowHandle" @hide="rightMenuHideHandle">
<v-contextmenu-item @click="copyLogInfo">复制该行数据

<v-contextmenu-item @click="saveLogInfoImg">存为图片

rightMenuShowHandle (vm) {
console.log('show event')
},
rightMenuHideHandle (vm) {
console.log('hide event')
},
在实际使用中，如果点击弹出菜单项，比如"复制该行数据"引发菜单关闭的话，会正常触发hide事件，但如果是点击菜单外的地方，引发菜单关闭，则hide事件并不触发。

使用了严格模式，建议打包时配置一下

Can v-contextmenu-items be populated from dynamic array?

比如有些场景下，需要先判断是否允许右键菜单弹出，满足则触发，反之也不触发。

内容过多时，在某些情况下，菜单顶部内容会溢出浏览器顶部可视范围

期望结果

菜单的顶部 （top） 至少 >=0

实际结果

内容过多时，在某些情况下，菜单顶部内容会溢出浏览器顶部可视范围

复现步骤

环境说明

• 组件版本：
• Vue 版本：
• 操作系统及版本：
• 浏览器及版本：