Vue g6捕获双击事件后，如何在画布新增一个表单

Question

问题遇到的现象和发生背景

使用treeGraph.on("node:dblclick", 可捕获双击事件，但是无法实现双击后出现一个表单，让用户可以对于node节点属性进行修改

用代码块功能插入代码，请勿粘贴截图

<template>
    <div>
      <div id="mountNode">    
      </div>
    </div>
 </template>
  
<script>
import G6 from '@antv/g6';

export default {
    name: 'ProjectMind',
    mounted() {
      this.initG6()
    },
    data() {
      return {
           value: [],
      }
    },
    methods: {
        initG6() {
            const data = { "id": "17", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://www.baidu.com","Ports":{"80":"http","443":"https"}, "children": [ 
{ "id": "18", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://test.baidu.com","Ports":{"80":"http","443":"https"}, "warning": "true", "layer": "1", "children": [ {"id": "19", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"资产发现", "Author":"实习生", "Url": "https://ttt.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"java,struts2","layer": "2"},
     {"id": "20", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"资产发现", "Author":"实习生", "Url": "https://www.hunter.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"java,springboot,shiro", "layer": "2"},
     {"id": "23", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "http://guonei.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"aspx,iis", "layer": "2"},
     {"id": "24", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://wx.api.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"java,tomcat,shiro", "layer": "2"},
     ] },
     { "id": "28", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"资产发现", "Author":"实习生", "Url": "https://wtx.api.baidu.com","Ports":{"80":"http","443":"https"}, "layer": "1", "children": [ {"id": "21", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://attack.api.baidu.com"},
     {"id": "22", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"资产发现", "Author":"实习生", "Url": "https://manager.api.baidu.com"},
     {"id": "30", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://fanyi.baidu.com"} ] },
     { "id": "29", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://api.fanyi.baidu.com","Ports":{"80":"http","443":"https"}, "children": [ {"id": "31", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://admin.fanyi.baidu.com"},
     {"id": "32", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"资产发现", "Author":"实习生", "Url": "https://api.iii.baidu.com"},
     { "id": "17", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "proName","Ports":{"80":"http","443":"https"}, "children": [ { "id": "18", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://test.fanyi.baidu.com","Ports":{"80":"http","443":"https"}, "warning": "true", "layer": "1", "children": [ {"id": "19", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"资产发现", "Author":"实习生", "Url": "https://ttt.fanyi.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"java,springboot,shiro","layer": "2"},
     {"id": "20", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://map.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"php,thinkphp,mysql", "layer": "2"},
     {"id": "23", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"资产发现", "Author":"实习生", "Url": "https://map.api.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"java,springboot,shiro", "layer": "2"},
     {"id": "24", "NodeAddTime":"2022-11-10 12:11:21", "NodeSource":"手动添加", "Author":"实习生", "Url": "https://info.baidu.com","Ports":{"80":"http","443":"https"}, "fpring":"asp,mssql", "layer": "2"},
     ] } ] }] } ] };
;
            const container = document.getElementById('mountNode');
            
            const ToolbarKeyValue=['添加节点','删除节点'];
    
            // 功能栏
            const toolbar = new G6.ToolBar({
                container: container,
                getContent: () => {
                    return `
                    

                        
${ToolbarKeyValue[0]}
                        
${ToolbarKeyValue[1]}
                    
                    `
                },
                handleClick: (code, graph) => {
                    console.log(code)
                    console.log("[DEBUG]: 用户点击了功能框，需要进行搜索等信息");
                }
            });

            //鼠标移动到节点预览信息
            const tooltip = new G6.Tooltip({
                offsetX: 10,
                offsetY: 20,
                getContent(e) {
                    const outDiv = document.createElement('div');
                    //资产指纹信息处理
                    var OutFpringInfo="";
                    var OutFpringInfodata="";
                    if ("fpring" in e.item.getModel()){
                        OutFpringInfodata=e.item.getModel().fpring.split(',')
                    }else{
                        OutFpringInfodata=[]
                    }
                    for (var i =0;i<OutFpringInfodata.length;i++){
                        OutFpringInfo+='
'+OutFpringInfodata[i]+'
'
                    }

                    //资产端口信息处理
                    var OutPortsInfo="";
                    var OutPortsInfodata="";
                    if ("Ports" in e.item.getModel()){
                        OutPortsInfodata=e.item.getModel().Ports
                    }else{
                        OutPortsInfodata=[]
                    }
                    for (var ai in OutPortsInfodata){
                        OutPortsInfo+='
'+ai+':    '+OutPortsInfodata[ai]+'
'
                    }

                    outDiv.innerHTML = `
                    
基本信息
                    

                    

                        
节点URL: ${e.item.getModel().Url}
                        
节点添加时间: ${e.item.getModel().NodeAddTime}
                        
节点发现人: ${e.item.getModel().Author}
                        
节点来源: ${e.item.getModel().NodeSource}
                    
                    
指纹信息
                    

                    

                        ${OutFpringInfo}
                    
                    
端口开放信息
                    

                    

                        ${OutPortsInfo}
                    
                    `
                    return outDiv
                },
                itemTypes: ['node']
            });
            //Menu操作菜单
            const menu = new G6.Menu({
                container: container,
                getContent: (e) => {
                    return `
                    
常规操作
                    

                    

                        
常规全量探测(dirsearch&子域名&ssl Cert)
                        
资产拓展(子域名&ssl证书&子域名&icon)
                    
                    `
                },
                handleMenuClick(code, item) {
                    console.log("Task is : "+code)
                }
            })
    
            const treeGraph = new G6.TreeGraph({
                container: 'mountNode',
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight,
                nodeStateStyles: {
                    selected: {
                    fill: 'Cyan',
                    lineWidth: 1,
                    },
                    hover: {
                    fill: 'red',
                    lineWidth: 1,
                    },
                },
                plugins:[menu,toolbar,tooltip],
                modes: {
                    default: [
                    {
                        type: 'collapse-expand',
                    },
                    //多选节点
                    {
                        type:'brush-select',
                        trigger: 'alt',
                        multiple: true,
                    },
                    'drag-canvas',
                    'drag-node',
                    'scroll-canvas',
                    ],
                },
                layout: {
                    type: 'mindmap',
                    direction: 'LR',
                    getHeight: () => {
                        return 56;
                    },
                    getWidth: () => {
                        return 16;
                    },
                    getVGap: () => {
                        return 10;
                    },
                    getHGap: () => {
                        return 100;
                    },
                    getSide: () => {
                        return 'right';
                    },
                },
            });

    
    
            //对着画布双击触发事件
            treeGraph.on("canvas:dblclick", evt => {
                console.log("[DEBUG]: 用户双击了画布，需要增加节点")
            })

            //对着节点双击出触发事件
            treeGraph.on("node:dblclick", evt => {
                console.log("[DEBUG]: 用户双击了画布，需要修改节点内容");
            
            })
            treeGraph.data(data);
            treeGraph.render();
            treeGraph.fitView();

        },
        //获取后端nuclie的所有模块
        SysReqNuclieExpmodule() {
            
            if(response.status == "true"){
            this.$message({
            showClose: true,
            message: '停止成功！',
            type: 'success'
            });
            }else{
            this.$message({
            showClose: true,
            message: response.error,
            type: 'error'
            });
            }
        }
    }
}
</script>

我的解答思路和尝试过的方法

尝试使用getContent方法返回html，不可行，翻阅官方API关于事件的文档，好像没有这块记载

我想要达到的结果

想实现双击节点，画布出现一个表单，可对于node节点属性进行修改，编辑，并保存

问题解决报酬

可发布赏金需求附上30赏金，晚上喝个咖啡提神，希望师傅能帮看看这个需求
csdn机制太坑，我上一个问题都没解决，问题都不能回收，赏金就被套了

Answer 1

原生的这么写，我没有你的整个环境所以写个原生的，如果是element-ui你可以声明一个隐藏的element-ui元素，他有显示属性，left，top坐标属性，data属性，响应到node:dblclick属性时设置显示属性为ture，left，top,data属性，和你正常写一样的，

function createForm(event) {
    const form = document.createElement("form");
    form.style.position = 'absolute'
    form.style.left = (event.clientX+10) + 'px'
    form.style.top = (event.clientY+10) + 'px'
    form.style.height = '300px'
    form.style.width = '400px'
    form.setAttribute("method", "post");
    form.setAttribute("action", "javascript:void(0)");
    const FN = document.createElement("input");
    FN.setAttribute("type", "text");
    FN.setAttribute("name", "FullName");
    FN.setAttribute("value", event.target.attrs['text']);
    form.appendChild(FN);
    document.getElementsByTagName("body")[0].appendChild(form);
}
graph.on('node:dblclick', createForm);