AntV G6图：右键菜单

1、右键菜单div

<template>
  <div class="space-wapper" @contextmenu.prevent="preventDefault">
    <!-- 画布 -->
    <div id="spaceGraph" ref="spaceGraphRef" class="space-graph"></div>
    <!-- 右键菜单 -->
    <div class="context-menu" id="contextMenu">
      <div class="del-text" v-if="delText.includes('删除')">
        {{ delText }}
      </div>
      <div class="add-text" v-else>{{ delText }}</div>
      <div class="add-text line-text">查看节点路线</div>
      <div class="del-text" v-if="lineList.length">清除节点路线</div>
    </div>
  </div>
</template>

2、右键菜单css

<style lang='scss' scoped>
.space-wapper {
  height: 100%;
  .space-graph {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .context-menu {
    position: absolute;
    top: -100px;
    left: -200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    border-radius: 4px;
    .del-text {
      text-align: center;
      width: 110px;
      line-height: 30px;
      color: #f56c6c;
      background: #f5f5f5;
      border: 1px solid #f5ebeb;
      cursor: pointer;
      border-radius: 4px;
      &:hover {
        border-color: #fbc4c4;
      }
    }
    .add-text {
      text-align: center;
      width: 110px;
      line-height: 30px;
      color: #409eff;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      cursor: pointer;
      border-radius: 4px;
      &:hover {
        border-color: #409eff;
      }
    }
    .line-text {
      margin: 8px 0px;
    }
  }
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
  .g6-minimap {
    position: absolute;
    bottom: 2px;
    left: 1px;
    border: 1px solid #ccc;
    background: #fff;
  }
}
</style>

2、画布右键事件

   /**
     * 鼠标事件
     */
    mouseEvent() {
      const that = this;
      // 画布-右键：显示右键菜单
      that.graph.on("contextmenu", (ev) => {
        let menu = document.getElementById("contextMenu");
        // item 为空：画布空白处
        if (!ev.item) {
          that.delData = null;
          that.delText = "新建节点";
        } else {
          const type = ev.item._cfg.type;
          if (type === "node") {
            that.delData = ev.item._cfg.model.data;
            that.delText = "删除节点";
          }
          if (type === "edge") {
            that.delData = { relationId: ev.item._cfg.model.id };
            that.delText = "删除连线";
          }
        }
        menu.style.top = ev.canvasY + "px";
        menu.style.left = ev.canvasX + "px";
        // 阻止默认的右键菜单
        ev.preventDefault();
      });
      // 画布-单击：隐藏右键菜单
      that.graph.on("click", (ev) => {
        // item 为空：画布空白处
        if (!ev.item) {
          let menu = document.getElementById("contextMenu");
          menu.style.top = "-100px";
          menu.style.left = "-200px";
        }
      });
    },