jquery becomes vue
want to imitate the jquery plug-in to write vue components, in the implementation process encountered the following problems,
want to add elements to html, the mouse to draw a rectangle, encountered difficulties in rendering to html,
renderLayer idea is to append on canvas, but with vue implementation do not know how to write, ask God to give a train of thought
<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("-sharpcanvas").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;
}