Context-menu-plus NPM

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-plus

Usage

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>

right menu context menu context-menu context right click menu

@everything-registry/sub-chunk-1376

1.0.0

1 year ago