test-er.vue

<template>
	<view class="box">
		<movable-area ref="contentArea" class="content-window">
			<thirdlucky-uml-entity
				v-for="(table, index) in tables"
				:x="table.x"
				:y="table.y"
				:key="table.key"
				:entityName="table.entityName"
				:title="table.title"
				:columns="table.columns"
				:style="{ order: index }"
				@start="onStart"
				@end="onEnd"
			/>
		</movable-area>
		<movable-area ref="toolBar" class="tool-bar">
			<thirdlucky-uml-entity ref="entityTool" entityName="entity" title="实体" @start="onStartTool" @end="onEndTool" />
		</movable-area>
		<view ref="propertyBar" class="property-bar"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tables: []
		};
	},
	methods: {
		resetTool() {
			this.$refs.entityTool.reset();
		},
		onStart(key, event, x, y) {
			console.log(key + ':' + event + ':' + x + ':' + y);
		},
		onEnd(key, event, x, y) {
			console.log(key + ':' + event + ':' + x + ':' + y);
		},
		onStartTool(key, event, x, y) {
			console.log(key + ':' + event + ':' + x + ':' + y);
		},
		onEndTool(key, event, x, y) {
			console.log(key + ':' + event + ':' + x + ':' + y);
			this.addEntity(x, y);
		},
		addEntity(x, y) {
			let count = this.tables.length;
			let tool = this.$refs.toolBar;
			let w = tool.width;

			if(x-w>=0){
				let table = { x: x - w, y: y, title: '实体' + count, entityName: 'test' + count, columns: [] };
				this.tables.push(table);
			}
			
			this.resetTool();
		}
	}
};
</script>

<style lang="scss">
$window-height: 93vh;
$border-width: 5rpx;
$control-width: 200rpx;
$control-height: 200rpx;

.box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.tool-bar {
	order: 1;
	width: 10%;
	height: $window-height;
	background-color: #ffffff;
	border-style: solid;
	margin-right: 0;
	border-width: $border-width;
}
.content-window {
	order: 2;
	width: 80%;
	margin-left: -$border-width;
	height: $window-height;

	border-style: solid;
	border-width: $border-width;
	background-color: #e3e3e3;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.property-bar {
	order: 3;
	width: 10%;
	margin-left: -$border-width;
	height: $window-height;
	background-color: #9d9d9d;
	border-style: solid;
	border-width: $border-width;
}

@keyframes example {
	0% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
	25% {
		background-color: yellow;
		left: 200px;
		top: 0px;
	}
	50% {
		background-color: blue;
		left: 200px;
		top: 200px;
	}
	75% {
		background-color: green;
		left: 0px;
		top: 200px;
	}
	100% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
}
</style>