vue3-context-menu

vue3-context-menu copied to clipboard

vue3-context-menu

A context menu component for Vue3

中文说明

Click here View online Demo

features

• Simple and easy to use, small size
• Provide component mode and function mode
• Customizable

❗ Upgrade Note

Version 1.1.0 has been greatly upgraded and may be incompatible with the previous version. If there is a problem, please install version 1.0.9.

Install

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

Useage

It is recommended that you check the examples source code before use. It provides a variety of detailed usage methods, which may be very helpful to you. 😀

Import

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

createApp(App).use(ContextMenu)     

Show menu

There are two ways to display menus:

The first is the function mode. You can use this.$contextmenu or showContextMenu global function displays a menu through menu data:

import ContextMenu from '@imengyu/vue3-context-menu'

onContextMenu(e : MouseEvent) {
  //prevent the browser's default menu
  e.preventDefault();
  //shou your 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" },
        ]
      },
    ]
  });

  //Same as this.$contextmenu
  ContextMenu.showContextMenu({ ... }); 
}

The second is the component mode. You can use the component and template to display the menu:

<context-menu
  v-model:show="show"
  :options="optionsComopnent"
>
  <context-menu-item label="Simple item" @click="onMenuClick(1)" />
  <context-menu-sperator /><!--use this to add sperator-->
  <context-menu-group label="Menu with child">
    <context-menu-item label="Item1" @click="onMenuClick(2)" />
    <context-menu-item label="Item2" @click="onMenuClick(3)" />
    <context-menu-group label="Child with v-for 50">
      <context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="onLoopMenuClick(index)" />
    </context-menu-group>
  </context-menu-group>
</context-menu>

data() {
  return {
    show: false,
    //For $contextmenu
    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
    },
    //For component
    optionsComopnent: {
      zIndex: 3,
      minWidth: 230,
      x: 500,
      y: 200
    },
  }
},
methods: {
  onButtonClick(e : MouseEvent) {
    //显示组件菜单
    this.show = true;
    this.options.x = e.x;
    this.options.y = e.y;
  },
}

Menu icon

The menu component does not provide any icons. If you want to add an icon, it is recommended to use iconfont Icon library. After importing, fill in the icon attribute of MenuItem to display the icon in front of the menu item.

By default, the <i> element is used to display icons

You can also completely customize the rendering icon through the slot of the menu, such as:

<context-menu-item label="Item with custom icon slot">
  <template #icon>
    <img src="https://imengyu.top/assets/images/test/icon.png" style="width:20px;height:20px" />
  </template>
</context-menu-item>

Customize the icon of the entire menu:

<context-menu
  v-model:show="show"
  :options="options"
>
  <template #itemIconRender={ icon }>
    <!--icon is the icon attribute passed in the menu-item. You can use your own icon component here-->
    <img :src="icon" style="width:20px;height:20px" />
  </template>
  ... menu items ...
</context-menu>

Customize icon in function mode:

{ 
  label: "Item with custom icon render",
  icon: h('img', {
    src: 'https://imengyu.top/assets/images/test/icon.png',
    style: {
      width: '20px',
      height: '20px',
    }
  }),
},

Custom style

If you think the menu style is not good-looking, you can rewrite the CSS style. All CSS style definitions are in /src/ContextSubMenu.vue. You can copy all the styles, modify them as needed, and store them in your file. Then overwrite the default style where you import:

import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import 'your-style-file-path.css'

Customize

The menu provides some slots that allow you to customize some parts of the rendering. For details, please refer to the example source code examples/views/BasicCustomize.vue examples/views/ComponentCustomize.vue。

API reference

Component mode: component properties and description

ContextMenu

Menu component.

Props

Events

Slots

MenuItemRenderData

ContextMenuItem

Menu item component.

Props

Slots

Click

ContextMenuGroup

Submenu component.

Props

Slots

ContextMenuSperator

Menu separator component.

Function mode

Global Function

• ContextMenu.showContextMenu(options: MenuOptions, customSlots?: Record<string, Slot>)

  Show context menu.

  Param	Description
  options	The options of menu.
  customSlots	These slots to allow you to customize the style of the current menu, the names of these slots are the same as those in the component mode.

• ContextMenu.closeContextMenu()

  Manually close the currently open context menu.

• this.$contextmenu

  Same as ContextMenu.showContextMenu but this function is registered to vue global property.

MenuOptions

MenuItem

Changelog

Changelog