github-laziji / menujs Goto Github PK

          { label: '删除节点', icon: 'el-icon-delete', customClass: 'deleteMenuItem' }

类似这种设置，并没有将 deleteMenuItem 插入到菜单的 dom 里面，全局的 customClass 是有效的

浏览器审查代码

每关闭一次就多一个

Performance monitor中的DOM Nodes会越来越多

[如何在iview/element ui的table中显示呢？table没有内容也应该可以能点击右菜单，效果就如C/S架构的软件操作方法一样]

我正常按一下模式引入 但是好像样式没有生效 如下图
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Contextmenu from 'vue-contextmenujs'

Vue.use(ElementUI)
Vue.use(Contextmenu)

Vue.use(Contextmenu)不在main.js全局引用的话
this.$contextmenu如何在局部使用

使用了该插件很符合基本需求，但是自定义话程度可以加一点，比如回调click事件局限了

创建与隐藏后会输出大量换行和注释标签，每次显隐都会在根节点输出一行注释标签，如果显隐次数过多应该会让页面变的巨大影响性能，希望能改进一下

document.onkeyup = (e) => { // 右键菜单快捷键
let key = e.key.toLowerCase();
switch (key) {
case "a":
// 这里右键菜单出来了
// this.$contextmenu({})已经实例化出来了
// 监听到键盘的a键之后，怎么销毁右键菜单，点击右键菜单事件肯定没问题
break;
default:
break;
}
}

只要

这是报错信息

These relative modules were not found:
* ./components/Contextmenu in ./node_modules/vue-contextmenujs/src/index.js
* ./components/Submenu in ./node_modules/vue-contextmenujs/src/index.js

引入文件夹 .vue 后缀就好了，希望能修正下

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/vue-contextmenujs/src/index.js b/node_modules/vue-contextmenujs/src/index.js
index c8bcc76..c041707 100644
--- a/node_modules/vue-contextmenujs/src/index.js
+++ b/node_modules/vue-contextmenujs/src/index.js
@@ -1,6 +1,6 @@
 
 import Vue from 'vue';
-import Submenu from "./components/Submenu";
+import Submenu from "./components/Submenu.vue";
 import { getElementsByClassName } from "./util";
 import { COMPONENT_NAME, CLASS_MENU, CLASS_MENU_ITEM, CLASS_MENU_ITEM_UNCLICKABLE } from "./constant";
 

This issue body was partially generated by patch-package.

大佬可以做一下 vue3 版本的吗

之前的代码实现

1.4.7版本的实现

如何实现右键在一些地方显示（1）、（2）、（3）、（4）、（5）功能选项，右键在另一些地方需要隐藏一些功能选项，譬如只显示功能（1）、（2）

当我指定某个元素进行全屏(screenfull)时,原先注册在该元素内的右键菜单在全屏后不显示了. 分析了源码发现应该是右键菜单的元素不在全屏元素范围内导致的. 希望能够增加一个选项可以指定右键元素所属的父元素

IE浏览器中，子菜单位置错位?

Submenu.vue 组件中 191和192行 在IE内核中 读取不到 menuItemClientRect.x 和 menuItemClientRect.y ，这里是否可以处理一下？

嵌套组件里面使用右击插件，会存在冒泡的矛盾，不阻止的话，无法触发子组件的右击，阻止的话导致右击里面的点击事件无法触发

求助，想要兼容IE11怎么办？

如题，比如根据接口返回的数据去动态展示某一子级的菜单内容

只需 传入元素的pageX,pageY即可
this.$contextmenu({
x: e.pageX,
y: e.pageY,
items: [
{
label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
}
]
])

希望可以加个属性可以选择不出现

vue版本2.5.17
element-ui版本 2.4.6
本插件版本 1.3.13
debugger发现点击优先执行 item的close 方法
onPrintmenu(event) { this.$contextmenu({ items: [{ label: "打印(P)...", icon: "el-icon-printer", disabled: false, hidden: false, onClick: () => { console.info('fileUrl:', event); } }], event, minWidth: 100 }); }

目前使用时，发现菜单项属性添加的class，实际上没有产生。导致无法自定义每一项的样式。

我在使用基本菜单组件时，报未定义的错误，我已经按文档配置好了为啥会出现这个错误

如题，增加一个d.ts类型定义文件，如下，可以这之后可方便编辑器直接显示出函数和类型定义，也方便像我这样粗心的同学写错菜单项的定义。

types/index.d.ts

export declare interface MenuOptions {
  /**
   * 菜单结构信息
   */
  items : MenuItem[],
  /**
   * 鼠标事件信息
   */
  event ?: Event,
  /**
   * 菜单显示X坐标, 存在event则失效
   */
  x ?: number,
  /**
   * 菜单显示Y坐标, 存在event则失效
   */
  y ?: number,
  /**
   * 菜单样式z-index
   */
  zIndex ?: number,
  /**
   * 自定义菜单class
   */
  customClass	?: string,
  /**
   * 主菜单最小宽度
   */
  minWidth ?: number,
}

export declare interface MenuItem {
  /**
   * 菜单项名称
   */
  label ?: string,
  /**
   * 菜单项图标, 生成<i></i>元素
   */
  icon ?: string,
  /**
   * 是否禁用菜单项
   */
  disabled ?: boolean,
  /**
   * 是否显示分割线
   */
  divided ?: boolean,
  /**
   * 自定义子菜单class
   */
  customClass ?: string,
  /**
   * 子菜单最小宽度
   */
  minWidth ?: number,
  /**
   * 菜单项点击事件
   */
  onClick ?: Function,
  /**
   * 子菜单结构信息
   */
  children ?: MenuItem[],
}

declare module 'vue/types/vue' {
  interface Vue {
    /**
     * vuecontextmenujs
     */
    $contextmenu: (options : MenuOptions) => void;
  }
}