fix
This commit is contained in:
X1627315083
@@ -0,0 +1,233 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user