zl-opd-view/src/components/layouttmp/LayoutTmp.vue

<template>
	<VueDragResize 
	:isActive="false" 
	w="auto" 
	h="auto"  
	:snapToGrid="true" 
	:gridX="10" 
	:gridY="10" 
	v-for="(el,index) in modelValue"
	:key="el.paramCode"
	:isResizable="el.elType!='single'"
	:parentLimitation="true"
	:x="el.left||0"
	:y="el.top||0"
	@resizing="(newRect)=>{resize(newRect,el)}" 
	@dragstop="(newRect)=>{resize(newRect,el)}"
	
	>
	
		<div class="single" v-if="el.elType=='single'" :style="{width:el.width+'px',height:el.height+'px'}">
			<div class="single-header">{{el.paramName}}</div>
			<div class="single-body"></div>
		</div>
		<div class="multi" v-else-if="el.elType=='multi'" :style="{width:el.width+'px',height:el.height+'px'}">
			<div class="multi-header">{{el.paramName}}</div>
			<div class="multi-body"></div>
		</div>
		
		<div class="wellName" v-else-if="el.elType=='wellName'" :style="{width:el.width+'px',height:el.height+'px'}">
			{{el.paramName}}
		</div>
	
	</VueDragResize>
	
</template>

<script setup>
	import {ref,reactive,toRaw,onMounted } from 'vue'
	import VueDragResize from 'vue-drag-resize/src'
	
	const emit=defineEmits(['update:modelValue'])
	
	const props=defineProps({
		modelValue:{
			type:Array,
			required:true
		}
	})
	
	const resize=(newRect,el)=>{
		//console.log(el,tag)
		//console.log(newRect)
		let {width,height,left,top}=newRect
		Object.assign(el,{width,height,left,top})
		emit('update:modelValue',props.modelValue) 
	}
	
	/**
	const activeHandle=(el,activeTag)=>{  
		el['active']=activeTag
	}**/
</script>

<style scoped>
	.single,.multi{
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 0px;
		background-color: #f0f9ff;
		border:1px solid #e3f1f8;
		border-radius: 5px;
	}
	.single .single-header{
		background-color:#5085ff;
		height: 50%;
		
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		color:#fff;
		text-align: center;
		
		font-size: 14px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}
	
	.multi{
		text-align: center;
		font-size: 14px;
		display: flex;
		flex-flow:column nowrap;
		
	}
	
	.multi-header{
		height:30px;
		font-size: 14px;
		line-height: 30px;
		background-color:#5085ff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		color:#fff;
	}
	
	.multi-body{
		flex:1;
		box-sizing: border-box;
		padding:2px;
	}
	
	.wellName{
		padding: 0px;
		border-bottom: 1px solid #5085ff;
	}
</style>