README.CN.md

vue3-context-menu

一个使用 Vue3 制作的简洁美观简单的右键菜单组件

---

查看演示

---

安装

npm install -save @imengyu/vue3-context-menu

使用

导入组件：

import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import ContextMenu from '@imengyu/vue3-context-menu'

createApp(App)
  .use(ContextMenu)     

<div class="box" @contextmenu="onContextMenu($event)">
  Right click to show contextmenu.
</div>

显示菜单：

onContextMenu(e : MouseEvent) {
  //prevent the browser's default menu
  e.preventDefault();
  //shou our menu
  this.$contextmenu({
    x: e.x,
    y: e.y,
    items: [
      { 
        label: "A menu item", 
        onClick: () => {
          alert("You click a menu item");
        }
      },
      { 
        label: "A submenu", 
        children: [
          { label: "Item1" },
          { label: "Item2" },
          { label: "Item3" },
        ]
      },
    ]
  });
}

同样，也可以使用组件模式显示菜单：

<context-menu v-model:show="show" :options="options" />

data() {
  return {
    show: false,
    options: {
      items:[
        {
          label: "Copy",
          onClick: () => {
            document.execCommand('copy');
          }
        },
        { label: "Paste", disabled: true },
        {
          label: "Print",
          icon: 'icon-print',
          onClick: () => {
            document.execCommand('print');
          }
        },
      ],
      iconFontClass: 'iconfont',
      customClass: "class-a",
      minWidth: 230,
      x: 0,
      y: 0
    }
  }
},
methods: {
  onButtonClick(e : MouseEvent) {
    //显示菜单
    this.show = true;
    this.options.x = e.x;
    this.options.y = e.y;
  },
}

菜单图标

菜单组件不提供任何图标，如果您想添加图标，推荐使用 iconfont 图标库，导入后填写 MenuItem 的 icon 属性，即可在菜单项前面显示图标。

默认使用 <i> 元素来显示图标。

自定义样式

如果觉得菜单样式不好看，可以重写css样式，所有的css样式定义都在 /src/ContextSubMenu.vue 中。你可以将所有样式复制出来，按需修改，存放在你的文件中。然后在导入的地方覆盖默认样式：

import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import '你的样式css文件路径.css'

参数说明

MenuOptions

属性	描述	类型	可选值	默认值
items	菜单结构信息	MenuItem[]	—	—
x	菜单显示X坐标	number	—	0
y	菜单显示Y坐标	number	—	0
xOffset	子菜单与父菜单X的偏移	number	—	0
yOffset	子菜单与父菜单Y的偏移	number	—	0
iconFontClass	自定义图标字体类名	string	—	iconfont
zIndex	菜单的z-index	number	—	2
customClass	自定义菜单类名	string	—	—
minWidth	主菜单最小宽度	number	—	100
maxWidth	主菜单最大宽度	number	—	600

MenuItem

属性	描述	类型	可选值	默认值
label	菜单项名称	string	—	—
icon	菜单项图标	string	—	—
disabled	是否禁用菜单项	boolean	—	false
divided	是否显示分割线	boolean	—	false
customClass	自定义子菜单class	string	—	—
minWidth	子菜单最小宽度	number	—	100
maxWidth	子菜单最大宽度	number	—	600
onClick	菜单项点击事件	Function()	—	—
children	子菜单结构信息	MenuItem[]	—	—