vue3使用@imengyu/vue3-context-menu完成antv/x6右键菜单

SunFlower914

已于 2024-05-23 10:34:28 修改

阅读量2.2k

点赞数 4

文章标签： antv/x6 vue3 右键菜单

于 2024-01-26 17:04:13 首次发布

本文链接：https://blog.csdn.net/sunflower914/article/details/135870615

版权

本文介绍了如何在Vue3项目中通过npm安装和引入imengyu/vue3-context-menu插件，展示了如何在页面中实现右键菜单功能，包括复制和删除操作的处理。

摘要由CSDN通过智能技术生成

1、下载插件：

npm i @imengyu/vue3-context-menu@1.3.6

2、main.js中引入并注册

// 右键菜单
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import ContextMenu from '@imengyu/vue3-context-menu'
app.use(ContextMenu)
app.mount('#app')

3、在页面中引入并使用插件：

<script setup>
import ContextMenu from "@imengyu/vue3-context-menu";

graph.on("node:contextmenu", ({ e, x, y, cell, view }) => {
  handleContextmenu(e);
});

// 右键菜单
const handleContextmenu = (e) => {
  const cells = graph.getSelectedCells();
  ContextMenu.showContextMenu({
    x: e.pageX,
    y: e.pageY,
    items: [
      {
        label: "复制(Ctrl+c&Ctrl+z)",
        disabled: cells.length === 0 ? true : false,
        onClick: () => {
          if (cells.length) {
            graph.copy(cells);
            if (!graph.isClipboardEmpty()) {
              const cells = graph.paste({ offset: 32 });
              // 解决复制的节点修改失效问题
              cells.forEach((item) => {
                let node = item.store.data;
                node.shape !== "data-processing-curve" &&
                  (node.data.id = node.id);
              });
              graph.cleanSelection();
              graph.select(cells);
            }
          }
        },
      },
      {
        label: "删除(Backspace)",
        disabled: cells.length === 0 ? true : false,
        onClick: () => {
          if (cells.length) {
            graph.removeCells(cells);
          }
        },
      },
    ],
  });
};
</script>