Admin_Poker 2022-11-10 23:49 采纳率: 75%
浏览 38
已结题

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

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

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

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

当前的代码:

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

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

我想要达到的结果

我想弄成这样子

img


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

  • 写回答

2条回答 默认 最新

  • 游一游走一走 2022-11-11 09:21
    关注

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

报告相同问题?

问题事件

  • 系统已结题 11月23日
  • 已采纳回答 11月15日
  • 创建了问题 11月10日

悬赏问题

  • ¥15 nrf52810-c三个a 程序
  • ¥15 lego-loam跑出来的roll误差很大
  • ¥50 求一个半透明没有锯齿的圆角窗体的实现例子
  • ¥15 STM32cubeMX里的FreeRTOS无法释放内存
  • ¥15 CATIA有些零件打开直接单机确定终止
  • ¥15 请问有会的吗,用MATLAB做
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并—
  • ¥15 孟德尔随机化怎样画共定位分析图
  • ¥18 模拟电路问题解答有偿速度
  • ¥15 CST仿真别人的模型结果仿真结果S参数完全不对