1.4.1 • Published 20 days ago
@imengyu/vue3-context-menu v1.4.1
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
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 | |
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 |
AD: Author's other project
- vue-code-layout A Vue editor layout component that like VSCode
- vue-dock-layout A Vue editor layout component that like Visual Studio
- vue-dynamic-form A data driven form component for vue3
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
1.4.1
20 days ago
1.4.0
1 month ago
1.3.9
2 months ago
1.3.8
3 months ago
1.3.7
4 months ago
1.3.6
4 months ago
1.3.5
5 months ago
1.3.4
5 months ago
1.3.3
10 months ago
1.3.2
10 months ago
1.3.1
10 months ago
1.2.8
12 months ago
1.2.7
12 months ago
1.3.0
11 months ago
1.2.9
12 months ago
1.2.10
12 months ago
1.2.6
1 year ago
1.2.5
1 year ago
1.2.4
1 year ago
1.2.0
1 year ago
1.2.3
1 year ago
1.2.2
1 year ago
1.2.1
1 year ago
1.1.9
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
1.1.2
2 years ago
1.1.10
1 year ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago