我并不是前端开发,只是个人兴趣,想实现一些自己想要的功能
//对着节点双击出触发事件
//画布容器对象。 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 () 进行创建