vue3-context-menu
A context menu component for Vue3
English | 简体中文
Features
- Simple and easy to use, small size
- Provide component mode and function mode
- Provide multiple theme styles for your use
- Customizable
Documentation
Useage
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;
},
}Development
git clone [email protected]:imengyu/vue3-context-menu.git
cd vue3-context-menu
npm install
npm serveBuilt-in themes
| theme | explain | example image |
|---|---|---|
default |
Default theme |  |
default dark |
Default theme with dark |  |
flat |
Simple flat theme |  |
flat dark |
Simple flat theme with dark |  |
win10 |
Win10 like theme |  |
win10 dark |
Win10 like theme with dark |  |
mac |
Mac like theme |  |
mac dark |
Mac like theme with dark |  |