context-menu-plus
v1.0.0
Published
A browser's context menu library.
Downloads
7
Maintainers
wangyuda2017Readme
context-menu-plus
A browser's context menu library.
Install
- Using
npm
npm install context-menu-plus --save- Using
yarn
yarn add context-menu-plus- Using
pnpm
pnpm add context-menu-plusUsage
Basic Usage
import { ContextMenu } from 'context-menu-plus'
const menu = new ContextMenu(document, [
{
id: '1', // required
label: 'First Item'
},
{
id: '2', // required
label: 'Second Item'
}
], (id) => {
console.log(id)
})Arguments
- targetEl
- Type: HTMLELement | HTMLDocument
- Description: target element instance
- Required: true
- menuList
- Type: MenuItem[] | MenuFun
- Description: Can be an array or function, default is [].
- Required: false
- callback
- Type: (id: string, data: any) => void
- Description: Click the callback function of item, default is undefined.
- Required: false
- styles
- Type: ContextMenuStyle
- Description: context menu style.
- Required: false
Methods
- show(): Show context menu.
- hide(): Hide context menu
- update(): update context menu list.
- destroy(): remove context menu eventListener and element.
Advanced Usage
Dynamically generate a menuList
import { ContextMenu } from 'context-menu-plus'
const menu = new ContextMenu(document, (ev) => {
return [{
id: '1', // required
label: `x: ${ev.clientX} y: ${ev.clientY}`
}]
}, (id) => {
console.log(id)
})Return extra data
import { ContextMenu } from 'context-menu-plus'
const menu = new ContextMenu(document, [
{
id: '1', // required
label: 'First Item',
data: {
userId: 'Tom'
}
},
{
id: '2', // required
label: 'Second Item',
data: {
userId: 'Lily'
}
}
], (id,data) => {
console.log(id, data)
})Used in Vue3
<script setup lang="ts">
import { ContextMenu } from 'context-menu-plus'
const menu = new ContextMenu(document, [
{
id: '1', // required
label: 'First Item'
},
{
id: '2', // required
label: 'Second Item'
}
], (id) => {
console.log(id)
})
</script>Used in Vue2
<script>
import { ContextMenu } from 'context-menu-plus'
export default {
created() {
const menu = new ContextMenu(document, [
{
id: '1', // required
label: 'First Item'
},
{
id: '2', // required
label: 'Second Item'
}
], (id) => {
console.log(id)
})
}
}
</script>Used in browsers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas width="500" height="500" id="myCanvas"></canvas>
<script src="./fabric.min.js"></script>
<script src="./dist/index.umd.js"></script>
<script>
const menu = new contextMenuPlus.ContextMenu(document, [
{
id: '1', // required
label: 'First Item'
},
{
id: '2', // required
label: 'Second Item'
}
], (id) => {
console.log(id)
})
</script>
</body>
</html>