请问下，可以支持在一个页面中，显示不同的菜单吗 about vue3-contextmenu

[whitemay]

v-contextmenu是用来传递附加参数的，必须是dict类型。
由于采用全局总线机制，所有的菜单都会监听到add-contextmenu事件。我觉得你可以尝试改造一下contextmenu类，在bus收到addmenu的时候，进行一个判断，是否自己的id，相同的话才显示。

[ydcode]

这个思路应该可行 @Hunlongyu 大佬有空添加下吗

1. ContextMenu 添加name属性

  props: {
    cutomClass: String,
    name: String
  }

<context-menu name="contex-menu-1">
    <context-menu-submenu :label="'查看'">
      <context-menu-item :disabled="true">图标</context-menu-item>
      <context-menu-item>列表</context-menu-item>
      <context-menu-item>详细信息</context-menu-item>
    </context-menu-submenu>
</context-menu>


<context-menu name="contex-menu-2">
    <context-menu-submenu :label="'查看'">
      <context-menu-item :disabled="true">图标</context-menu-item>
      <context-menu-item>列表</context-menu-item>
      <context-menu-item>详细信息</context-menu-item>
    </context-menu-submenu>

    <context-menu-submenu :label="'查看'">
      <context-menu-item :disabled="true">图标</context-menu-item>
      <context-menu-item>列表</context-menu-item>
      <context-menu-item>详细信息</context-menu-item>
    </context-menu-submenu>
</context-menu>

2. 通过v-contextmenu参数配置指定要使用的menu name.

<div class="demo" v-contextmenu="{ name: 'contex-menu-1', id: '456'}">右键点击区域{id: '999'} 触发Menu 1</div>
<div class="demo" v-contextmenu="{ name: 'contex-menu-2', id: '456'}">右键点击区域{id: '999'} 触发Menu 2 </div>

3. ContextMenu组件内添加if判断, 只显示指定name的menu

<div class="v-contextmenu" v-show="show" ref="contextmenu" v-if="bindingValue && name === bindingValue.name">
  <slot />
</div>

[Hunlongyu]

这个思路应该可行 @Hunlongyu 大佬有空添加下吗

1. ContextMenu 添加name属性

  props: {
    cutomClass: String,
    name: String
  }

<context-menu name="contex-menu-1">
    <context-menu-submenu :label="'查看'">
      <context-menu-item :disabled="true">图标</context-menu-item>
      <context-menu-item>列表</context-menu-item>
      <context-menu-item>详细信息</context-menu-item>
    </context-menu-submenu>
</context-menu>


<context-menu name="contex-menu-2">
    <context-menu-submenu :label="'查看'">
      <context-menu-item :disabled="true">图标</context-menu-item>
      <context-menu-item>列表</context-menu-item>
      <context-menu-item>详细信息</context-menu-item>
    </context-menu-submenu>

    <context-menu-submenu :label="'查看'">
      <context-menu-item :disabled="true">图标</context-menu-item>
      <context-menu-item>列表</context-menu-item>
      <context-menu-item>详细信息</context-menu-item>
    </context-menu-submenu>
</context-menu>

2. 通过v-contextmenu参数配置指定要使用的menu name.

<div class="demo" v-contextmenu="{ name: 'contex-menu-1', id: '456'}">右键点击区域{id: '999'} 触发Menu 1</div>
<div class="demo" v-contextmenu="{ name: 'contex-menu-2', id: '456'}">右键点击区域{id: '999'} 触发Menu 2 </div>

3. ContextMenu组件内添加if判断, 只显示指定name的menu

<div class="v-contextmenu" v-show="show" ref="contextmenu" v-if="bindingValue && name === bindingValue.name">
  <slot />
</div>

层主可以提交 pr 嘛， 我最近太忙了，真的没有时间维护。

[ydcode]

@Hunlongyu 已提交PR， 第一次提交，如有纰漏请多包涵和纠正 :D

[Hunlongyu]

哈哈，开源项目就是大家一起贡献，我已经合并，等会我重新打包，发布一个新版本到 npm 上

[Hunlongyu]

依赖已更新
同时欢迎大家一起贡献

[ydcode]

@Hunlongyu 有个衍生问题，第一次显示ContextMenu时，参数结果是undefined未能正确传递.

    <div class="v-contextmenu" v-show="show" ref="contextmenu" v-if="bindingValue && name === bindingValue.name">
改为
    <div class="v-contextmenu" v-show="show && bindingValue && name === bindingValue.name" ref="contextmenu">

已提交PR.