Skip to content

扩展节点菜单

鸿图的节点菜单使用了 antd 的 Tree 组件,开发者可以参考 antd 官方文档实现。示例:

ts
{
  label: '自定义节点列表',
  children: [
    {
      label: '我的自定义节点',
      searchKeys: 'my custom node',
      nodeType: 'MyCustomeNodeType'
    }
  ]
}

注意

nodeType 一定要和自定义节点的 type 一致。

searchKeys 用于搜索,如下图:

扩展数据

对于复杂的自定义节点,可以添加 data 字段,用于扩展节点数据。

ts
{
  label: '自定义节点列表',
  children: [
    {
      label: '我的自定义节点',
      searchKeys: 'my custom node',
      nodeType: 'MyCustomeNodeType',
      data: {}
    },
  ]
}

扩展的数据字段名只能为 data。它会作为自定义节点的属性传入。如:

tsx
const MyNode = ({ id, selected, data }: NodeProps) => {
  return (<></>)
}

上面例子中,MyNode 是一个自定义的鸿图节点组件,其中的属性 data 就是扩展的数据。

国际化

插件接口 createMenu(language: string) 中的language参数可以方便开发者实现国际化。它和鸿图的语言是同步的,可以在鸿图编辑器的设置里面修改。