vue鼠标添加div

Question

jquery变成vue

想要仿照jquery插件去写vue的组件，在实现过程中遇到了下面的问题，
想要带html上追加元素，鼠标画矩形，在渲染到html上的时候遇到了困难，
renderLayer的思路是在canvas上追加，但是用vue实现就不知道该怎么写了，求大神给个思路

  <div ref="canvas" id="canvas" @mousedown="canvasDown($event)" @mousemove="canvasMove($event)" @mouseup="canvasUp($event)">
      
   </div>

  canvasDown(e) {
        this.drawing = true
        this.canvasOffset = this.$canvas.getBoundingClientRect()
        var x = e.pageX; // 鼠标落下时的X
        var y = e.pageY; // 鼠标落下时的Y
        this.props = {
          left: e.pageX - this.canvasOffset.left,
          top: e.pageY - this.canvasOffset.top,
          width: 0,
          height: 0
        };
        // console.log(`${e.pageX}=========${ this.canvasOffset.left}`)
        this.renderLayer();
        // console.log(document.querySelector('#canvas').offsetTop)
        // this.$curLayer = this.renderLayer();
      },

      canvasMove(e) {
        if (this.drawing) {
          this.props.width = e.pageX - this.props.left - this.canvasOffset.left;
          this.props.height = e.pageY - this.props.top - this.canvasOffset.top;
          this.renderLayer();
        }
      },
      canvasUp(e) {
        this.drawing = false
        // if (props.width < 12 || props.height < 12) {
        //   this.$curLayer.remove();
        // } else {
        //   $curLayer.find('.handle, .layer-tip').removeClass('hide');
        //   self.isModified = true;
        //   console.log($curLayer)
        //   self.dragEvent($curLayer);
        //   self.bindEvent($curLayer);
        // }


      },   
renderLayer() {
      $layer = $layer || null;
        if (!$layer) {
          var idx = +new Date() + Math.floor(Math.random() * 900 + 100),
            html = [];
          html.push(
            '<div id="drag-' + idx + '" data-url="" data-target="" class="drag">',
            '    <span class="handle NE hide"></span>',
            '    <span class="handle NN hide"></span>',
            '    <span class="handle NW hide"></span>',
            '    <span class="handle WW hide"></span>',
            '    <span class="handle EE hide"></span>',
            '    <span class="handle SW hide"></span>',
            '    <span class="handle SS hide"></span>',
            '    <span class="handle SE hide"></span>',
            '    <span class="layer-tip hide">双击设置链接</span>',
            '    <span class="layer-close"></span>',
            '</div>'
          );
          $layer = $(html.join(''));
          this.$canvas.append($layer);
        }

        添加文字垂直距中
        props.lineHeight = props.height + 'px';
        $layer.css(props);
         return $layer;
   }

Answer 1

不是有v-html指令吗？直接渲染就行了呀

Answer 2

可以在data里面保存位置信息，鼠标移动的时候，更改位置信息，同时在模板里面加一个div来根据这个位置信息来调整就好了