平铺元素ui更改

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

@@ -1,13 +1,12 @@
 <template>
 	<div class="slider" :disabled="disabled">
-		<div class="input-range">
-			<span
-				class="tip"
-				:style="{
-					'--progress': (value - props.min) / (props.max - props.min),
-				}"
-				>{{ props.tipFormatter(value) }}</span
-			>
+		<div
+			class="input-range"
+			:style="{
+				'--progress': (value - props.min) / (props.max - props.min),
+			}"
+		>
+			<span class="tip">{{ props.tipFormatter(value) }}</span>
 			<input
 				type="range"
 				v-model="value"
@@ -20,8 +19,7 @@
 			/>
 		</div>
 		<div class="input" v-show="isInput">
-			<input
-				type="number"
+			<my-input
 				v-model="value"
 				:min="props.min"
 				:max="props.max"
@@ -29,6 +27,7 @@
 				@input="onInput"
 				@change="onChange"
 				:disabled="disabled"
+				type="number"
 			/>
 		</div>
 	</div>
@@ -36,6 +35,7 @@
 
 <script setup lang="ts">
 	import { ref, defineProps, defineEmits, watch } from "vue";
+	import MyInput from "./MyInput.vue";
 	const props = defineProps({
 		disabled: {
 			type: Boolean,
@@ -86,9 +86,10 @@
 		position: relative;
 		display: flex;
 		align-items: center;
-		--input-thumb-size: 12px;
 		width: 150px;
-		// &:focus-within,
+		--input-thumb-size: 10px;
+		--backcolor1: var(--slider-thumb-color1, #4285f4);
+		--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
 		&:hover {
 			> .input-range > .tip {
 				display: block;
@@ -103,21 +104,26 @@
 				appearance: none;
 				height: 5px;
 				border-radius: 5px;
-				background: rgba(0, 0, 0, 0.1); /* 更柔和的颜色 */
 				outline: none;
+				background: linear-gradient(
+					to right,
+					var(--backcolor1) 0%,
+					var(--backcolor1) calc(var(--progress) * 100%),
+					var(--backcolor2) calc(var(--progress) * 100%),
+					var(--backcolor2) 100%
+				);
 				&::-webkit-slider-thumb {
 					-webkit-appearance: none;
 					appearance: none;
 					width: var(--input-thumb-size);
 					height: var(--input-thumb-size);
 					border-radius: 50%;
-					background: #4285f4; /* 蓝色滑块 */
+					background: var(--backcolor1); /* 蓝色滑块 */
 					cursor: pointer;
 					transition: all 0.2s;
 					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 				}
 				&::-webkit-slider-thumb:hover {
-					background: #3b77db;
 					transform: scale(1.1);
 				}
 			}