-
-
-
-
-
+
-
@@ -88,6 +88,7 @@ import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
+import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
setup(prop) {
@@ -159,6 +160,7 @@ export default defineComponent({
currentFullBodyView,
designItemDetailTS,
body,
+ getMousePosition,
};
},
data() {
@@ -171,8 +173,16 @@ export default defineComponent({
//操作旋转
rotote:{
mounted(el,value){
-
- el.addEventListener('mousedown', (e) => {
+ let mousedown = function(event){
+ let e = getMousePosition(event,false)
+ mouseDownOperation(e)
+ }
+
+ let touchstart = function(event){
+ let e = getMousePosition(event,true)
+ mouseDownOperation(e)
+ }
+ let mouseDownOperation = (e) => {
let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
@@ -185,12 +195,19 @@ export default defineComponent({
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
- e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
- let mousemove = (e) => {
+ let mouseMove = function(event){
+ let e = getMousePosition(event,false)
+ mouseMoveOperation(e)
+ }
+ let touchmove = function(event){
+ let e = getMousePosition(event,true)
+ mouseMoveOperation(e)
+ }
+ let mouseMoveOperation = (e) => {
if (mouse) {
let X = eX
let Y = eY
@@ -201,16 +218,24 @@ export default defineComponent({
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
}
}
- document.addEventListener('mousemove', mousemove);
+ // document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器
let mouseup = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
- document.removeEventListener('mouseup',mouseup)
- document.removeEventListener('mousemove',mousemove)
+ document.removeEventListener('mousemove',mouseMove)
+ document.removeEventListener('touchmove',touchmove)
+ document.removeEventListener('mouseup',mouseup)
+ document.removeEventListener('touchend',mouseup)
}
+ // document.addEventListener('mouseup', mouseup);
+ document.addEventListener('mousemove', mouseMove);
+ document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
- });
+ document.addEventListener('touchend', mouseup);
+ };
+ el.addEventListener('mousedown',mousedown)
+ el.addEventListener('touchstart',touchstart)
}
},
@@ -301,8 +326,12 @@ export default defineComponent({
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
- document.addEventListener("mouseup", this.mouseup);
- document.addEventListener("mousemove", this.moveMousemove);
+ // document.addEventListener("mouseup", this.mouseup);
+ // document.addEventListener("mousemove", this.moveMousemove);
+ document.addEventListener('mousemove', this.mouseMove);
+ document.addEventListener('touchmove', this.touchmove);
+ document.addEventListener('mouseup', this.mouseup);
+ document.addEventListener('touchend', this.mouseup);
},
//设置尺寸
itemSizeMousedown(direction,event){
@@ -325,23 +354,42 @@ export default defineComponent({
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
- document.addEventListener("mouseup", this.sizeMouseup);
- document.addEventListener("mousemove", this.sizeMousemove);
+ // document.addEventListener("mouseup", this.sizeMouseup);
+ // document.addEventListener("mousemove", this.sizeMousemove);
+ document.addEventListener('mousemove', this.sizeMouseMove);
+ document.addEventListener('touchmove', this.sizeTouchmove);
+ document.addEventListener('mouseup', this.sizeMouseup);
+ document.addEventListener('touchend', this.sizeMouseup);
+ },
+ mouseMove(event){
+ let e = getMousePosition(event,false)
+ this.mouseMoveOperation(e)
+ },
+ touchmove(event){
+ let e = getMousePosition(event,true)
+ this.mouseMoveOperation(e)
},
//鼠标移动
- moveMousemove(e) {
+ mouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
- let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
- let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+ let x = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+ let y = ( e.clientY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
},
-
- sizeMousemove(e) {
+ sizeMouseMove(event){
+ let e = getMousePosition(event,false)
+ this.sizeMouseMoveOperation(e)
+ },
+ sizeTouchmove(event){
+ let e = getMousePosition(event,true)
+ this.sizeMouseMoveOperation(e)
+ },
+ sizeMouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
@@ -351,27 +399,27 @@ export default defineComponent({
let w,h
//判断移动四个边
if(this.direction == 'right'){
- w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
- h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+ w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)
+ h = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
- w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
- h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
+ w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
+ h = (this.printStyleList[this.imgDomIndex].centers.top - e.clientY)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
- h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
+ h = (e.clientY - this.printStyleList[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
- w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
+ w = (this.printStyleList[this.imgDomIndex].centers.left - e.clientX)
width = w+'px'
height = w*num1+'px'
}
@@ -391,13 +439,21 @@ export default defineComponent({
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
- document.removeEventListener("mouseup", this.sizeMouseup);
- document.removeEventListener("mousemove", this.sizeMousemove);
+ // document.removeEventListener("mouseup", this.sizeMouseup);
+ // document.removeEventListener("mousemove", this.sizeMousemove);
+ document.removeEventListener('mousemove',this.sizeMouseMove)
+ document.removeEventListener('touchmove',this.sizeTouchmove)
+ document.removeEventListener('mouseup',this.sizeMouseup)
+ document.removeEventListener('touchend',this.sizeMouseup)
},
mouseup(e) {
- document.removeEventListener("mouseup", this.mouseup);
- document.removeEventListener("mousemove", this.moveMousemove);
+ // document.removeEventListener("mouseup", this.mouseup);
+ // document.removeEventListener("mousemove", this.moveMousemove);
+ document.removeEventListener('mousemove',this.mouseMove)
+ document.removeEventListener('touchmove',this.touchmove)
+ document.removeEventListener('mouseup',this.mouseup)
+ document.removeEventListener('touchend',this.mouseup)
},
deletePrint(){
this.exhibitionElementsList.splice(this.imgDomIndex,1)
diff --git a/src/component/Detail/DesignElementsMobile.vue b/src/component/Detail/DesignElementsMobile.vue
index 2d013746..92d0a66e 100644
--- a/src/component/Detail/DesignElementsMobile.vue
+++ b/src/component/Detail/DesignElementsMobile.vue
@@ -43,7 +43,7 @@
v-for="item,index in exhibitionElementsList"
:key="item"
:style="[printStyleList?.[index]?.style]"
- @touchstart.stop="itemMoveMousedown(index,$event)"
+ @touchstart.passive="itemMoveMousedown(index,$event)"
class="modal_imgItem"
ref="content" >
@@ -52,11 +52,11 @@
--
-
-
-
-
+
-
diff --git a/src/component/Detail/DesignPrintOperation.vue b/src/component/Detail/DesignPrintOperation.vue
index 7b12f9b1..f0829f06 100644
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -90,7 +90,7 @@
:key="item"
v-if="overallSingle"
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
- @mousedown.stop="itemMoveMousedown(index,$event)"
+ @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
class="modal_imgItem"
ref="content"
>
@@ -100,10 +100,10 @@
-
-
-
-
-
+
+
+
+
-
@@ -144,6 +144,8 @@ import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
import { remove } from "jszip";
+import { getMousePosition } from "@/tool/mdEvent";
+
export default defineComponent({
setup(prop) {
@@ -232,6 +234,7 @@ export default defineComponent({
currentFullBodyView,
designItemDetailTS,
body,
+ getMousePosition,
};
},
data() {
@@ -244,8 +247,16 @@ export default defineComponent({
//操作旋转
rotote:{
mounted(el,value){
-
- el.addEventListener('mousedown', (e) => {
+ let mousedown = function(event){
+ let e = getMousePosition(event,false)
+ mouseDownOperation(e)
+ }
+
+ let touchstart = function(event){
+ let e = getMousePosition(event,true)
+ mouseDownOperation(e)
+ }
+ let mouseDownOperation = (e) => {
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
@@ -258,12 +269,19 @@ export default defineComponent({
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
- e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
- let mousemove = (e) => {
+ let mouseMove = function(event){
+ let e = getMousePosition(event,false)
+ mouseMoveOperation(e)
+ }
+ let touchmove = function(event){
+ let e = getMousePosition(event,true)
+ mouseMoveOperation(e)
+ }
+ let mouseMoveOperation = (e) => {
if (mouse) {
let X = eX
let Y = eY
@@ -281,11 +299,21 @@ export default defineComponent({
let mouseup = () => {
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
- document.removeEventListener('mouseup',mouseup)
- document.removeEventListener('mousemove',mousemove)
+ // document.removeEventListener('mouseup',mouseup)
+ // document.removeEventListener('mousemove',mousemove)
+ document.removeEventListener('mousemove',mouseMove)
+ document.removeEventListener('touchmove',touchmove)
+ document.removeEventListener('mouseup',mouseup)
+ document.removeEventListener('touchend',mouseup)
}
+ // document.addEventListener('mouseup', mouseup);
+ document.addEventListener('mousemove', mouseMove);
+ document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
- });
+ document.addEventListener('touchend', mouseup);
+ }
+ el.addEventListener('mousedown',mousedown)
+ el.addEventListener('touchstart',touchstart)
}
},
@@ -462,8 +490,12 @@ export default defineComponent({
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
- document.addEventListener("mouseup", this.mouseup);
- document.addEventListener("mousemove", this.moveMousemove);
+ // document.addEventListener("mouseup", this.mouseup);
+ // document.addEventListener("mousemove", this.moveMousemove);
+ document.addEventListener('mousemove', this.mouseMove);
+ document.addEventListener('touchmove', this.touchmove);
+ document.addEventListener('mouseup', this.mouseup);
+ document.addEventListener('touchend', this.mouseup);
},
//设置尺寸
itemSizeMousedown(direction,event){
@@ -486,16 +518,28 @@ export default defineComponent({
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
- document.addEventListener("mouseup", this.sizeMouseup);
- document.addEventListener("mousemove", this.sizeMousemove);
+ // document.addEventListener("mouseup", this.sizeMouseup);
+ // document.addEventListener("mousemove", this.sizeMousemove);
+ document.addEventListener('mousemove', this.sizeMouseMove);
+ document.addEventListener('touchmove', this.sizeTouchmove);
+ document.addEventListener('mouseup', this.sizeMouseup);
+ document.addEventListener('touchend', this.sizeMouseup);
+ },
+ mouseMove(event){
+ let e = getMousePosition(event,false)
+ this.mouseMoveOperation(e)
+ },
+ touchmove(event){
+ let e = getMousePosition(event,true)
+ this.mouseMoveOperation(e)
},
//鼠标移动
- moveMousemove(e) {
+ mouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
- let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
- let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
+ let x = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
+ let y = ( e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
if(!this.overallSingle){
@@ -514,8 +558,15 @@ export default defineComponent({
}
},
-
- sizeMousemove(e) {
+ sizeMouseMove(event){
+ let e = getMousePosition(event,false)
+ this.sizeMouseMoveOperation(e)
+ },
+ sizeTouchmove(event){
+ let e = getMousePosition(event,true)
+ this.sizeMouseMoveOperation(e)
+ },
+ sizeMouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
@@ -525,27 +576,27 @@ export default defineComponent({
let w,h
//判断移动四个边
if(this.direction == 'right'){
- w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
- h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
+ w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
+ h = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
- w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
- h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
+ w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
+ h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.clientY)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
- h = (e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
+ h = (e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
- w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
+ w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.clientX)
width = w+'px'
height = w*num1+'px'
}
@@ -565,13 +616,21 @@ export default defineComponent({
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
- document.removeEventListener("mouseup", this.sizeMouseup);
- document.removeEventListener("mousemove", this.sizeMousemove);
+ // document.removeEventListener("mouseup", this.sizeMouseup);
+ // document.removeEventListener("mousemove", this.sizeMousemove);
+ document.removeEventListener('mousemove',this.sizeMouseMove)
+ document.removeEventListener('touchmove',this.sizeTouchmove)
+ document.removeEventListener('mouseup',this.sizeMouseup)
+ document.removeEventListener('touchend',this.sizeMouseup)
},
mouseup(e) {
- document.removeEventListener("mouseup", this.mouseup);
- document.removeEventListener("mousemove", this.moveMousemove);
+ // document.removeEventListener("mouseup", this.mouseup);
+ // document.removeEventListener("mousemove", this.moveMousemove);
+ document.removeEventListener('mousemove',this.mouseMove)
+ document.removeEventListener('touchmove',this.touchmove)
+ document.removeEventListener('mouseup',this.mouseup)
+ document.removeEventListener('touchend',this.mouseup)
},
deletePrint(){
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
diff --git a/src/component/Detail/DesignPrintOperationMobile.vue b/src/component/Detail/DesignPrintOperationMobile.vue
index a48006d3..eaae6a93 100644
--- a/src/component/Detail/DesignPrintOperationMobile.vue
+++ b/src/component/Detail/DesignPrintOperationMobile.vue
@@ -93,7 +93,7 @@
:key="item"
v-if="overallSingle"
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
- @touchstart.stop="itemMoveMousedown(index,$event)"
+ @touchstart.passive="itemMoveMousedown(index,$event)"
class="modal_imgItem"
ref="content" >
@@ -101,18 +101,18 @@
---
-
-
-
-
+
-
-
+
+
+
+
-
+
-
diff --git a/src/component/Detail/addDetails.vue b/src/component/Detail/addDetails.vue
index c940af23..e703072a 100644
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -21,7 +21,7 @@
{{ $t('addDetails.AddDetails') }}+++++{{ $t('addDetails.submit') }} @@ -44,9 +48,9 @@-+ -
-
+
+
+
+
-
-
+
+
+
+