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

Question

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

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

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

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

我想要达到的结果

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

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);