vue3-contextmenu
vue3-contextmenu copied to clipboard
请问下,可以支持在一个页面中,显示不同的菜单吗
现在一个页面,只能注册一个菜单
<Contextmenu menuId="1">
</Contextmenu>
<Contextmenu menuId="2">
</Contextmenu>
<div v-contextmenu="1"></div>
<div v-contextmenu="2"></div>
v-contextmenu是用来传递附加参数的,必须是dict类型。 由于采用全局总线机制,所有的菜单都会监听到add-contextmenu事件。我觉得你可以尝试改造一下contextmenu类,在bus收到addmenu的时候,进行一个判断,是否自己的id,相同的话才显示。
这个思路应该可行 @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 大佬有空添加下吗
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 嘛, 我最近太忙了,真的没有时间维护。
@Hunlongyu 已提交PR, 第一次提交,如有纰漏请多包涵和纠正 :D
哈哈,开源项目就是大家一起贡献,我已经合并,等会我重新打包,发布一个新版本到 npm 上
依赖已更新 同时欢迎大家一起贡献
@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.