|
@@ -25,7 +25,7 @@
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
- class="background-img"
|
|
|
|
|
|
|
+ class="drawing-background-img"
|
|
|
:style="{
|
|
:style="{
|
|
|
width: data.image_width + 'px',
|
|
width: data.image_width + 'px',
|
|
|
height: data.image_height + 'px',
|
|
height: data.image_height + 'px',
|
|
@@ -91,16 +91,16 @@ export default {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
- document.querySelectorAll('.background-img').forEach((item) => {
|
|
|
|
|
|
|
+ document.querySelectorAll('.drawing-background-img').forEach((item) => {
|
|
|
item.addEventListener('mousemove', this.mouseMove);
|
|
item.addEventListener('mousemove', this.mouseMove);
|
|
|
});
|
|
});
|
|
|
document.body.addEventListener('mouseup', this.mouseUp);
|
|
document.body.addEventListener('mouseup', this.mouseUp);
|
|
|
},
|
|
},
|
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
|
- document.querySelectorAll('.background-img').forEach((item) => {
|
|
|
|
|
|
|
+ document.querySelectorAll('.drawing-background-img').forEach((item) => {
|
|
|
item.removeEventListener('mousemove', this.mouseMove);
|
|
item.removeEventListener('mousemove', this.mouseMove);
|
|
|
});
|
|
});
|
|
|
- // document.querySelectorAll('.background-img')?.removeEventListener('mousemove', this.mouseMove);
|
|
|
|
|
|
|
+ // document.querySelectorAll('.drawing-background-img')?.removeEventListener('mousemove', this.mouseMove);
|
|
|
document.body.removeEventListener('mouseup', this.mouseUp);
|
|
document.body.removeEventListener('mouseup', this.mouseUp);
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
@@ -182,10 +182,10 @@ export default {
|
|
|
startY: clientY,
|
|
startY: clientY,
|
|
|
type,
|
|
type,
|
|
|
};
|
|
};
|
|
|
- document.querySelectorAll('.background-img').forEach((item) => {
|
|
|
|
|
|
|
+ document.querySelectorAll('.drawing-background-img').forEach((item) => {
|
|
|
item.style.cursor = cursor;
|
|
item.style.cursor = cursor;
|
|
|
});
|
|
});
|
|
|
- // document.querySelectorAll('.background-img').style.cursor = cursor;
|
|
|
|
|
|
|
+ // document.querySelectorAll('.drawing-background-img').style.cursor = cursor;
|
|
|
},
|
|
},
|
|
|
/**
|
|
/**
|
|
|
* 鼠标移动
|
|
* 鼠标移动
|
|
@@ -289,8 +289,8 @@ export default {
|
|
|
*/
|
|
*/
|
|
|
mouseUp() {
|
|
mouseUp() {
|
|
|
this.data.drag.dragging = false;
|
|
this.data.drag.dragging = false;
|
|
|
- // document.querySelectorAll('.background-img').style.cursor = 'auto';
|
|
|
|
|
- document.querySelectorAll('.background-img').forEach((item) => {
|
|
|
|
|
|
|
+ // document.querySelectorAll('.drawing-background-img').style.cursor = 'auto';
|
|
|
|
|
+ document.querySelectorAll('.drawing-background-img').forEach((item) => {
|
|
|
item.style.cursor = 'auto';
|
|
item.style.cursor = 'auto';
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
@@ -334,7 +334,7 @@ export default {
|
|
|
padding: 20px 0;
|
|
padding: 20px 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.background-img {
|
|
|
|
|
|
|
+.drawing-background-img {
|
|
|
height: 310px;
|
|
height: 310px;
|
|
|
border: 1px dashed rgba(0, 0, 0, 8%);
|
|
border: 1px dashed rgba(0, 0, 0, 8%);
|
|
|
|
|
|