调整generate输入框出现滚动条问题

src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue

@@ -1,38 +1,73 @@
 <template>
-	<div class="angle-tool">
-		<div
-			ref="dishRef"
-			class="dish"
-			@mousedown.stop="mousedown"
-			@touchmove.stop="mousedown"
-		>
-			<div class="pointer" :style="{ transform: `rotate(${angle}deg)` }">
-				<span></span>
+	<div class="angle-tool" :disabled="disabled">
+		<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" />
-		</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 "@/component/Canvas/CanvasEditor/utils/helper";
+	import MyInput from "./MyInput.vue";
 	// Props
 	const props = defineProps({
+		styleType: {
+			type: String,
+			default: "1",
+		},
 		angle: {
 			type: Number,
 			default: 0,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	});
 	const emit = defineEmits(["change", "input"]);
 	const angle = ref(props.angle);
-	watch(() => props.angle, (value) => {
-		angle.value = value;
-	});
+	watch(
+		() => props.angle,
+		(value) => {
+			angle.value = value;
+		}
+	);
 	const dishRef = ref<HTMLDivElement>();
 	const mousedown = (e: MouseEvent | TouchEvent) => {
+		if (props.disabled) return;
 		const mousemove = (e: MouseEvent | TouchEvent) => {
 			if (!dishRef.value) return;
 			const { left, top, width, height } =
@@ -41,7 +76,6 @@
 			const centerY = top + height / 2;
 			const { clientX, clientY } = e?.touches?.[0] || e;
 			angle.value = calculateAngle(centerX, centerY, clientX, clientY, true);
-			console.log(angle.value)
 			onInput();
 		};
 		mousemove(e);
@@ -57,9 +91,10 @@
 		document.addEventListener("mouseup", mouseup);
 		document.addEventListener("touchend", mouseup);
 	};
-	const onInput = () => emit("input", angle.value);
+	const onInput = () => !props.disabled && emit("input", angle.value);
 	var changeTime: any = null;
 	const onChange = () => {
+		if (props.disabled) return;
 		clearTimeout(changeTime);
 		changeTime = setTimeout(() => emit("change", angle.value), 500);
 	};
@@ -80,10 +115,17 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
+		--color: #000;
+		&[disabled="true"] {
+			--color: #b2b2b2;
+			> .dish {
+				cursor: not-allowed;
+			}
+		}
 		> .dish {
 			width: 24px;
 			height: 24px;
-			border: 1px solid #000;
+			border: 1px solid var(--color);
 			border-radius: 50%;
 			cursor: pointer;
 			> .pointer {
@@ -99,7 +141,7 @@
 					transform: translate(-50%, 0);
 					width: 35%;
 					height: 35%;
-					background-color: #000;
+					background-color: var(--color);
 					border-radius: 50%;
 				}
 			}
@@ -107,7 +149,7 @@
 		> .input {
 			margin-left: 5px;
 			font-size: 14px;
-			color: #000;
+			color: var(--color);
 			flex: 1;
 			// min-width: 45px;
 			// max-width: 80px;
@@ -118,5 +160,8 @@
 				outline: none;
 			}
 		}
+		> .my-input {
+			flex: 1;
+		}
 	}
 </style>