Skip to content

A very simple context menu component for Vue3 一个简洁美观简单的Vue3右键菜单组件

License

Notifications You must be signed in to change notification settings

imengyu/vue3-context-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d8d8960 · May 7, 2025
Apr 16, 2025
Mar 28, 2025
May 7, 2025
Dec 6, 2024
Jan 28, 2023
Jul 2, 2021
Dec 6, 2024
Jul 2, 2021
Jan 26, 2024
Apr 8, 2023
Jul 2, 2021
Apr 10, 2024
Apr 16, 2025
Oct 8, 2024
Apr 15, 2025
Apr 15, 2025

Repository files navigation

vue3-context-menu

A context menu component for Vue3

Screenshot

English | 简体中文


Features

  • Simple and easy to use, small size
  • Provide component mode and function mode
  • Provide multiple theme styles for your use
  • Customizable

Documentation

View Documentation

Click here View online Demo

Usage

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

Then import in the main.ts file:

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

createApp(App).use(ContextMenu)     

Then you can use the ContextMenu in the .vue file:

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

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

Or component:

<context-menu
  v-model:show="show"
  :options="optionsComponent"
>
  <context-menu-item label="Simple item" @click="onMenuClick(1)" />
  <context-menu-separator /><!--use this to add separator-->
  <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,
    optionsComponent: {
      zIndex: 3,
      minWidth: 230,
      x: 500,
      y: 200
    },
  }
},
methods: {
  onButtonClick(e : MouseEvent) {
    //Show component mode menu
    this.show = true;
    this.options.x = e.x;
    this.options.y = e.y;
  },
}

Built-in themes

theme explain example image
default Default theme example-default-dark.jpg
default dark Default theme with dark example-default-dark.jpg
flat Simple flat theme example-default-dark.jpg
flat dark Simple flat theme with dark example-default-dark.jpg
win10 Win10 like theme example-default-dark.jpg
win10 dark Win10 like theme with dark example-default-dark.jpg
mac Mac like theme example-default-dark.jpg
mac dark Mac like theme with dark example-default-dark.jpg

AD: Author's other project

Development

git clone [email protected]:imengyu/vue3-context-menu.git
cd vue3-context-menu
npm install
npm run dev # Development serve project
npm run build-demo # Build example project
npm run build-lib # Build library project

License

MIT