Vue G6节点右键怎么使用element-ui标签制作功能表单

Question

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

自己使用vue+element-ui+G6写了一个脑图，想在右键点击node节点时，在当前node节点旁新增一个功能表单，表单可以使用element-ui标签，网上找的代码，只能使用纯html来写，自己html和javascript以及css不熟，希望师傅们能帮忙想下法子。

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

当前的代码：

test_AskCsdnxampleCode/ProjectMindmap.vue at main · LinuxProgramDevelop/test_AskCsdnxampleCode · GitHub Contribute to LinuxProgramDevelop/test_AskCsdnxampleCode development by creating an account on GitHub. https://github.com/LinuxProgramDevelop/test_AskCsdnxampleCode/blob/main/ProjectMindmap.vue

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

尝试将他的代码与我的代码结合，发现运行不报错，但是是空白的

我想要达到的结果

我想弄成这样子

他的代码：
https://github.com/blueju/vue-g6-editor/blob/master/src/views/index.vue

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