G6使用踩坑记录

问题

1. 鼠标右键，菜单设置后未展示

鼠标右键菜单有两种方式：

方式一（未生效，原因未知，球大佬告知）：

<template>
    <div id="container"></div>
</template>
<script setup lang=ts>
    let conextMenuContainer = document.createElement('ul')
    conextMenuContainer.id = 'contextMenu'
    // 创建li
    let firstLi = document.createElement('li')
    firstLi.innerText = '查看详情'
    conextMenuContainer.appendChild(firstLi)
    document.getElementById('container').appendChild(conextMenuContainer)
    firstLi.addEventListener('click', function (event) {
        console.log(`详情事件---`, event.target.innerHTML)
        event.stopPropagation() //阻止事件向上冒泡
    })

    let menu = document.getElementById('contextMenu')
    graph.on('node:contextmenu', function (event) {
        event.preventDefault();
        event.stopPropagation() //阻止事件向上冒泡
        menu.style.display = 'block'
        menu.style.left = event.canvasX + 20 + 'px'
        menu.style.top = event.canvasY + 'px'
       
    })
</script>

方式二（生效）：

const contextMenu = new G6.Menu({
    getContent() {
      return `
          <ul id="menuContainer">
            <li>查看详情</li>
            <li>计算日志</li>
          </ul>`
    },
    handleMenuClick: (target, item) => {
      console.log(target, item, target.innerHTML)
    },
    offsetX: 0,
    offsetY: -5,
    // 在哪些类型的元素上响应
    itemTypes: ["node"],
  })
graph = new G6.Graph({
    container: "container",
    width,
    height,
    linkCenter: true,
    layout: layoutCfg,
    modes: {
      default: ["drag-canvas"],
    },
    //在这里用插件的形式可以
    plugins: [contextMenu],
    defaultNode: {
      type: "circle", // 'bubble'
      size: 95,
      labelCfg: {
        position: "center",
        style: {
          fill: "white",
          fontStyle: "bold",
        },
      },
    },
    defaultEdge: {
      color: "#888",
      type: "animate-line", //'animate-line'
    },
})
  ...