JTopo在vue中双击图片弹出编辑框

JTopo官网有一个编辑框案例：jTopo Demo

编辑框写的位置如下：（此处我换成我需要的input元素，而非源码中的textarea）

<template id="template-mesh_topology">
        <div>
            <div class="advanceContent">
                <canvas width="600" height="800" id="canvas"
                    style="background-color: rgb(128, 128, 128); border: 1px solid rgb(68, 68, 68); cursor: default;">
                </canvas>
            </div>
            <div id="jtopo_textfield" class="control-input"
                style="background: #fff;position: absolute; top: 494px; left: 719px; display: none;">
                <input id="jtopo_input" class="input-txt" type="text" :disabled="disable_set==1"
                    @keydown="if(event.keyCode==13)this.blur();">
            </div>
        </div>
    </template>

双击弹出编辑框，编辑框焦点移开后隐藏编辑框：（在created调用画图函数，画图的函数里加入如下代码用来实现）

var textfield = $("#jtopo_textfield"),
    textinput = $("#jtopo_input");
scene.dbclick(function (event) {
    if (event.target == null) return;
    var e = event.target;
    textfield.css({
        top: event.pageY,
        left: event.pageX - e.width / 2
    }).show().find("input").attr('value', e.text).focus();
    e.text = "";
    textinput[0].JTopoNode = e;
});

textinput.blur(function () {
    textinput[0].JTopoNode.text = textfield.hide().find("input").val();
});