# bind-context-menu

**Repository Path**: account68/contentMenu

## Basic Information

- **Project Name**: bind-context-menu
- **Description**: javascript实现网页中自定义右键菜单，支持指定classname来绑定右键菜单
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-13
- **Last Updated**: 2025-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自定义右键菜单
## 原生html使用案例
见index.html

## vue使用案例
### 1.首先下载插件到项目

npm  install  bind-context-menu

### 2.然后引入 

main.js
```
import { addContextMenu } from "bind-context-menu";
import("bind-context-menu/css/style.css");
window.addContextMenu = addContextMenu;
```
component组件
```
onMounted(() => {
  nextTick(() => {
    let calssArr = menuLeft.value.map((item, index) => {
      return "#" + item.idName;
    });
    console.warn("calssArr", calssArr);
    let option = {
      addId: "addMenuId", //添加到弹窗的id
      addClass: "addMenuClass", //添加到弹窗的class
      closeSelector: "body", //绑定关闭弹窗的dom
      bindSelector: calssArr, //绑定打开弹窗的dom
      data: [
        {
          text: "编辑",
          // className: "content-menu-item-danger",
          action: (e) => {
            console.warn("编辑", e.target.id);
            let idName = e.target.id.slice(3);
            console.warn("idName", idName);
            let regDate = /\d+/;
            let menuIndex = idName.match(regDate)[0];
            console.warn("menuIndex", menuIndex);
            console.warn(
              "menuLeft.value[menuIndex]",
              menuLeft.value[menuIndex]
            );
          },
        },
        {
          text: "删除",
          action: (e) => {
            console.warn("删除", e.target.id);
          },
        },
        {
          className: "content-menu-item-divider",
        },
        {
          text: "关闭",
          action: (e) => {
            console.warn("关闭", e);
          },
        },
      ],
    };
    new window.addContextMenu(option);
  });
});
```