imengyu / vue3-context-menu

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,
    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.

Font icon

Use iconfont library: After importing, fill in the icon attribute of MenuItem to display the icon in front of the menu item.

• If the font names are different, you can specify other fonts by writing the iconFontClass attribute of MenuItem or MenuOptions.
• By default, the <i> element is used to display icons

SVG Icon

Support the use of svg <symbol> to display icons:

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Your icon -->
  <symbol id="icon-multiply" viewBox="0 0 1024 1024">
    <path d="M512 64C264.608 64 64 264.608 64 512c0 247.36 200.608 448 448 448 247.36 0 448-200.64 448-448 0-247.392-200.64-448-448-448z m158.4 651.552L512 557.312l-158.4 158.24-45.312-45.248L466.688 512l-158.304-158.4 45.312-45.312L512 466.688l158.4-158.4 45.28 45.312L557.312 512l158.368 158.4-45.28 45.152z" fill="#F74A21"></path>
  </symbol>
</svg>

//Function mode
this.$contextmenu({
  items: [
    { 
      label: "Item with svg icon",
      svgIcon: "#icon-multiply",
      svgProps: {
        fill: '#f60',
      },
    },
  ],
  //...
} as MenuOptions);

//Component mode
<context-menu-item label="Item with svg icon" svgIcon="#icon-multiply" :svgProps="{ fill: '#f60' }" />

Customize icon

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:

import { h } from 'vue';

{ 
  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