平铺组件

2026-01-07 13:02:08 +08:00
parent 8f1fea30ee
commit ae6f14efa9
4 changed files with 204 additions and 74 deletions
--- a/src/component/Canvas/test.vue
+++ b/src/component/Canvas/test.vue
@@ -1,54 +1,73 @@
 <template>
-	<div ref="modalTest"></div>
-    <a-modal class="modal_test generalModel" 
-		v-model:visible="testModal" 
-		:footer="null" 
-		:get-container="() => $refs.modalTest"
-		width="78%"
-		:maskClosable="false"
-		:centered="true"
-		:closable="false"
-		wrapClassName="#app"
-		:keyboard="false"
-	>
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
-
+	<div class="test">
+		<div class="control">
+			<div>
+				<span>偏移X</span>
+				<input type="number" v-model="data.offsetX" />
+			</div>
+			<div>
+				<span>偏移Y</span>
+				<input type="number" v-model="data.offsetY" />
+			</div>
+			<div>
+				<span>角度</span>
+				<input type="number" v-model="data.angle" />
+			</div>
+			<div>
+				<span>缩放</span>
+				<input type="number" v-model="data.scale" />
+			</div>
+			<div>
+				<span>水平间距</span>
+				<input type="number" v-model="data.gapX" />
+			</div>
+			<div>
+				<span>垂直间距</span>
+				<input type="number" v-model="data.gapY" />
 			</div>
 		</div>
-		<canvasIndex></canvasIndex>
-    </a-modal>
+		<div class="box">
+			<pingpu v-bind="data" />
+		</div>
+	</div>
 </template>

-<script lang="ts">
-	import { defineComponent,ref,createVNode,nextTick} from 'vue'
-	import canvasIndex from './index.vue'
-	export default defineComponent({
-		components:{canvasIndex},
-		setup(){
-		    let testModal = ref(true)
-			const init = ()=>{
-				testModal.value = true
-			}
-			const cancelDsign = ()=>{
-				testModal.value = false
-			}
-			return {
-				testModal,
-				init,
-				cancelDsign,
-			}
-		}
+<script lang="ts" setup>
+	import pingpu from "./pingpu.vue";
+	const data = ref({
+		url: "/src/assets/images/canvas/yinhua1.jpg",
+		offsetX: 0, // px
+		offsetY: 0, // px
+		angle: 0, // 角度
+		scale: 100,// %
+		gapX: 0, // px
+		gapY: 0, // px
 	});
+	window.data = data;
 </script>

 <style lang='less' scoped>
-.box {
-    border: 1px solid #f00;
-}
+	.test {
+		> .control {
+			margin-left: 10px;
+			margin-top: 10px;
+			> div {
+				display: flex;
+				align-items: center;
+				margin-bottom: 5px;
+				> span {
+					width: 80px;
+				}
+				>input{
+					padding-left: 10px;
+					border-radius: 5px;
+				}
+			}
+		}
+		> .box {
+			width: 100%;
+			max-width: 400px;
+			height: 500px;
+		}
+	}
 </style>