# context-menu-plus
**Repository Path**: wangyuda2017/context-menu-plus
## Basic Information
- **Project Name**: context-menu-plus
- **Description**: A browser's context menu library.
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-28
- **Last Updated**: 2023-03-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# context-menu-plus
A browser's context menu library.
## Install
* Using `npm`
```bash
npm install context-menu-plus --save
```
* Using `yarn`
```bash
yarn add context-menu-plus
```
* Using `pnpm`
```bash
pnpm add context-menu-plus
```
## Usage
### Basic Usage
```js
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
```js
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
```js
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
```html
```
### Used in Vue2
```html
```
### Used in browsers
```html
```