自定义右键菜单

原生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);
  });
});