npm:@imengyu/vue3-context-menu

README

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[]`	—	—

Usage no npm install needed!