233 lines
9.9 KiB
Vue
233 lines
9.9 KiB
Vue
<template>
|
|
<div class="molepositon">
|
|
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
|
|
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
|
|
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
|
</div>
|
|
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
|
|
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
|
|
<img :src="item.imageUrl" alt="">
|
|
</div>
|
|
{{ designDetail }}
|
|
<div class="designOpenrtion_btn">
|
|
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
|
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
|
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { useI18n } from 'vue-i18n'
|
|
import { getMousePosition } from "@/tool/mdEvent";
|
|
export default defineComponent({
|
|
components:{
|
|
},
|
|
setup(props,{emit}) {
|
|
const store = useStore();
|
|
const detailData = reactive({
|
|
frontBack:{
|
|
front:{},
|
|
back:{},
|
|
body:{},
|
|
},
|
|
designDetail:inject('designDetail') as any//父组件传过来的数据
|
|
})
|
|
console.log(detailData.designDetail);
|
|
|
|
const getDetailListDom = reactive({
|
|
libraryList:null as any,
|
|
})
|
|
watch(detailData.designDetail,(newValue,oldValue)=>{
|
|
console.log(123123);
|
|
|
|
})
|
|
|
|
//设置尺寸
|
|
const itemSizeMousedown = (direction:any,event:any)=>{
|
|
// this.direction = direction
|
|
// this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
|
|
// this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
|
|
// let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
// let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
|
|
// if(this.direction == 'right' || this.direction == 'bottom'){
|
|
// this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
|
|
// this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
|
|
// }else{
|
|
// this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
|
// this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
|
// }
|
|
|
|
document.addEventListener('mousemove', sizeMouseMove);
|
|
document.addEventListener('touchmove', sizeTouchmove);
|
|
document.addEventListener('mouseup', sizeMouseup);
|
|
document.addEventListener('touchend', sizeMouseup);
|
|
}
|
|
const sizeMouseMove = (event:any)=>{
|
|
let e = getMousePosition(event,false)
|
|
sizeMouseMoveOperation(e)
|
|
}
|
|
const sizeTouchmove = (event:any)=>{
|
|
let e = getMousePosition(event,true)
|
|
sizeMouseMoveOperation(e)
|
|
}
|
|
const sizeMouseup = (e:any)=>{
|
|
// this.frontBack.front[this.imgDomIndex].style={
|
|
// right:'auto',
|
|
// left:this.imgDom.offsetLeft+'px',
|
|
// bottom:'auto',
|
|
// top:this.imgDom.offsetTop+'px',
|
|
// height:this.imgDom.offsetHeight+'px',
|
|
// width:this.imgDom.offsetWidth+'px',
|
|
// zIndex:this.printZIndex
|
|
// }
|
|
// this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
|
|
document.removeEventListener('mousemove',sizeMouseMove)
|
|
document.removeEventListener('touchmove',sizeTouchmove)
|
|
document.removeEventListener('mouseup',sizeMouseup)
|
|
document.removeEventListener('touchend',sizeMouseup)
|
|
}
|
|
const sizeMouseMoveOperation = (e:any)=> {
|
|
// let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
// let parentNode =this.imgDom.parentNode
|
|
// let width = imgDomWH.width
|
|
// let height = imgDomWH.height
|
|
// let w,h
|
|
// let num = height/width
|
|
// //判断移动四个边
|
|
// if(this.direction == 'right'){
|
|
// 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'){
|
|
// num = width/height
|
|
// 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.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.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.clientX)
|
|
|
|
// width = w+'px'
|
|
// // height = w*num+'px'
|
|
// }
|
|
// //判断尺寸是否到边
|
|
// this.frontBack.front[this.imgDomIndex].style.width = width
|
|
// this.frontBack.front[this.imgDomIndex].style.height = height
|
|
}
|
|
// 设置移动
|
|
const mouseMove = (event:any)=>{
|
|
let e = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
const touchmove=(event:any)=>{
|
|
let e = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
const mouseup = (e:any)=> {
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
}
|
|
const mouseMoveOperation = (e:any)=>{
|
|
// let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
// let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
|
// 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
|
|
}
|
|
|
|
const itemMoveMousedown = (index:any,e:any)=>{
|
|
// this.imgDomIndex = index
|
|
// this.frontBack.front.forEach((v)=>{
|
|
// v.designOpenrtionBtn = false
|
|
// })
|
|
// this.clothesOpenActive(index)
|
|
// let event = e||window.event
|
|
// this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
|
|
// this.frontBack.front[index].designOpenrtionBtn = true
|
|
// this.frontBack.front[index].style.zIndex = this.printZIndex++
|
|
// this.frontBack.back[index].style.zIndex = this.printZIndex
|
|
// let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
// let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
|
|
// 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('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
const showDesignImgDetail = ()=>{
|
|
|
|
}
|
|
const deleteNav = ()=>{
|
|
|
|
}
|
|
return{
|
|
...toRefs(detailData),
|
|
...toRefs(getDetailListDom),
|
|
|
|
itemSizeMousedown,
|
|
itemMoveMousedown,
|
|
showDesignImgDetail,
|
|
deleteNav,
|
|
}
|
|
},
|
|
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.molepositon{
|
|
width: 80rem;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 3rem;
|
|
> .designOpenrtion_imgMask{
|
|
width: auto;
|
|
height: auto;
|
|
position: relative;
|
|
height: calc(100% - 1.2rem - 4.8rem - 20%);
|
|
// overflow: hidden;
|
|
>img{
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
>div{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |