antv F6 使用插件Plugins

按照官方文档上的教程是行不通的，因为f6的npm包里面没有plugins插件，需要单独下载

// 安装
npm i @antv/f6-plugin

然后在页面中引入，以下使用menu插件举个🌰

// 引入 menu 插件
import { Menu } from '@antv/f6-plugin'

// 插件的属性介绍请看官方文档 
const contextMenu = new Menu({
      getContent(evt) {
        let header;
        if (evt.target && evt.target.isCanvas && evt.target.isCanvas()) {
          header = 'Canvas ContextMenu';
        } else if (evt.item) {
          const itemType = evt.item.getType();
          header = `${itemType.toUpperCase()} ContextMenu`;
        }
        return `
        <div class="container">
          <div class="header" title="header">${header}</div>
          <div>
            <div class="li" title="1">div 1</div>
            <div class="li" title="2">div 2</div>
          </div>
        </div>
        `;
      },
      getCss: () => {
        return `
          .container {
            opacity: 0.9;
            width: 150;
            padding: 10 8;
            border: 1 solid #e2e2e2;
          }
          .header {
            padding-bottom: 10;
            font-weight: bold;
          }
          .li {
            padding-bottom: 10;
          }
        `;
      },
      handleMenuClick: (target) => {
        my.alert({
          title: `点击了: ${target.title}`,
        });
      },
      // offsetX and offsetY include the padding of the parent container
      // 需要加上父级容器的 padding-left 16 与自身偏移量 10
      offsetX: 0,
      // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
      offsetY: 0,
      // the types of items that allow the menu show up
      // 在哪些类型的元素上响应
      itemTypes: ['node', 'edge', 'canvas'],
    });


 // 创建F6实例
    this.graph = new F6.Graph({
      container: "", // 图的 DOM 容器
      width:"", // 指定画布宽度
      height:"",// 指定画布高度
      plugins: [contextMenu], // 挂载插件
      modes: {
        default: ['drag-node'],
      },
    });