/vue3-context-menu

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

Primary LanguageVueMIT LicenseMIT

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-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,
    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 git@github.com: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