aida_front/src/component/DetailCopy/model/modelPosition.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>