vue @anvt/G6通过graph.on节点捕获事件,在画布内节点周边增加一个表单,可对于节点属性进行修改

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

我并不是前端开发,只是个人兴趣,想实现一些自己想要的功能

用代码块功能插入代码,请勿粘贴截图
            //对着节点双击出触发事件
            //画布容器对象。 const treeGraph = new G6.TreeGraph({...})
            treeGraph.on("node:dblclick", evt => {
                console.log("[DEBUG]: 用户双击了画布,需要修改节点内容");
            })
我想要达到的结果

当我双击节点后,在当前节点旁出现一个表单,修改节点内的属性,师傅们只要教我怎么新增出一个表单就行

原生的这么写,我没有你的整个环境所以写个原生的,如果是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);

重点是新增一个表单,推荐两种方式:
1.事先写好一个表单,display:none,点击之后display:block显示并给他设置位置
2.点击之后使用document.createElement () 进行创建