+
![]()
-
@@ -54,7 +54,7 @@ import { useStore } from "vuex";
// import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import editFrontBack from '@/component/Detail/editFrontBack.vue'
-
+import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
// props: ["frontBack"],
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
@@ -108,6 +108,7 @@ export default defineComponent({
setRevocation,
frontBackOld,
editFrontBack,
+ getMousePosition,
};
},
data() {
@@ -273,8 +274,12 @@ export default defineComponent({
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
this.frontBack.front[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){
@@ -291,15 +296,25 @@ export default defineComponent({
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
- 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('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
- let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
- let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
+ let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
+ let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
@@ -315,8 +330,15 @@ export default defineComponent({
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
},
-
- 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
@@ -325,8 +347,8 @@ export default defineComponent({
let num = height/width
//判断移动四个边
if(this.direction == 'right'){
- w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
- h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
+ w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
+ h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
width = w+'px'
// height = w*num+'px'
}else if(this.direction == 'top'){
@@ -334,20 +356,20 @@ export default defineComponent({
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
- w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
- h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
+ w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
+ h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
height = h+'px'
// width = h*num+'px'
}else if(this.direction == 'bottom'){
num = width/height
- h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
+ h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
height = h+'px'
// width = h*num+'px'
}else if(this.direction == 'left'){
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
- w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
+ w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
width = w+'px'
// height = w*num+'px'
@@ -369,13 +391,19 @@ export default defineComponent({
zIndex:this.printZIndex
}
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
- 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)
},
clearModal(){
this.printZIndex = 2//点击图片z-index
diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue
index 165baded..d9f4aa12 100644
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -430,11 +430,16 @@ export default defineComponent({
async changeTemplateModal() {
if(this.modalImg[0]?.id){
- let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
- // layout.init('moodboard')
+ // let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
+ let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
await this.layout()
}
+ if(window.screen.width<1300){
+ layout.isMobile = true
+ }else{
+ layout.isMobile = false
+ }
// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
// this.layoutList = arr
layout.init()
@@ -505,6 +510,8 @@ export default defineComponent({
angleBLStyle:[],
class:this.moodb_className,
}
+ console.log(123123213);
+
this.store.commit("setDisposeMoodboardPosition", obj);
this.loadingShow = false
}
diff --git a/src/component/HomePage/layout.vue b/src/component/HomePage/layout.vue
index ddebd0bd..8893c595 100644
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -24,13 +24,13 @@
-
-
-
-
-
+
-
+
+
+
+