平铺元素ui更改

src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue

@@ -1,32 +1,53 @@
 <template>
 	<div class="angle-tool" :disabled="disabled">
-		<div
-			ref="dishRef"
-			class="dish"
-			@mousedown.stop="mousedown"
-			@touchmove.stop="mousedown"
-		>
-			<div class="pointer" :style="{ transform: `rotate(${angle}deg)` }">
-				<span></span>
+		<template v-if="styleType === '1'">
+			<div
+				ref="dishRef"
+				class="dish"
+				@mousedown.stop="mousedown"
+				@touchmove.stop="mousedown"
+			>
+				<div
+					class="pointer"
+					:style="{ transform: `rotate(${angle}deg)` }"
+				>
+					<span></span>
+				</div>
 			</div>
-		</div>
-		<div class="input">
-			<input
-				type="number"
-				v-model="angle"
-				@input="onInput"
-				@change="onChange"
-				:disabled="disabled"
-			/>
-		</div>
+			<div class="input">
+				<input
+					type="number"
+					v-model="angle"
+					@input="onInput"
+					@change="onChange"
+					:disabled="disabled"
+				/>
+			</div>
+		</template>
+
+		<my-input
+			v-if="styleType === '2'"
+			v-model="angle"
+			@input="onInput"
+			@change="onChange"
+			:disabled="disabled"
+			type="number"
+			after="°"
+			icon="icon-angle"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { ref, defineProps, defineEmits, watch } from "vue";
 	import { calculateAngle } from "../../utils/helper";
+	import MyInput from "./MyInput.vue";
 	// Props
 	const props = defineProps({
+		styleType: {
+			type: String,
+			default: "1",
+		},
 		angle: {
 			type: Number,
 			default: 0,
@@ -139,5 +160,8 @@
 				outline: none;
 			}
 		}
+		> .my-input {
+			flex: 1;
+		}
 	}
 </style>