fix: fix slider shaking when palette is dragged

ikun-svelte · Mar 15, 2024 · 103826e · 103826e
1 parent df7706b
commit 103826e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/components/ColorPicker/src/index.svelte b/components/ColorPicker/src/index.svelte
@@ -36,14 +36,18 @@
 
 	const dispatch = createEventDispatcher();
 	function handleChangeComplete(e: CustomEvent) {
+		isDragging = false;
 		const res = { ...e.detail, a: aColor.a };
 		aColor = res;
 		blockColor = res;
 		formatterColor = res;
 		isClear = false;
 		dispatch('changeComplete', formatColor(formatValue, blockColor));
 	}
+
+	let isDragging = false;
 	function handleChange(e: CustomEvent) {
+		isDragging = true;
 		const res = { ...e.detail, a: aColor.a };
 		aColor = res;
 		blockColor = res;
@@ -66,7 +70,6 @@
 	}
 
 	function handleAValueInput(e: CustomEvent) {
-		console.log(e.detail);
 		blockColor = e.detail;
 		formatterColor = e.detail;
 		isClear = false;
@@ -116,9 +119,11 @@
 
 	let hsvValue: HsvaColor = { h: 0, s: 0, v: 0, a: 100 };
 	$: {
-		hsvValue = tinycolor(value).toHsv() as HsvaColor;
-		hsvValue.s = hsvValue.s * 100;
-		hsvValue.v = hsvValue.v * 100;
+		if (!isDragging) {
+			hsvValue = tinycolor(value).toHsv() as HsvaColor;
+			hsvValue.s = hsvValue.s * 100;
+			hsvValue.v = hsvValue.v * 100;
+		}
 	}
 
 	let hsvDefaultValue: HsvaColor = { h: 0, s: 0, v: 0, a: 100 };

diff --git a/components/ColorPicker/src/types.d.ts b/components/ColorPicker/src/types.d.ts
@@ -16,7 +16,7 @@ export type KColorPickerProps = {
 	allowClear?: boolean;
 	/**
 	 * 默认颜色的值
-	 * @expiremrnt 可能会删除，初始化时决定线性范围，他会根据颜色的 slider 来变化
+	 * @expiremrnt 决定线性范围，他会根据颜色的 slider 来变化
 	 * @type string | RgbaColor | HsvaColor;
 	 * @default ''
 	 */
@@ -88,7 +88,7 @@ export type KColorPickerPaletteProps = {
 	value: string | RgbaColor | HsvaColor;
 	/**
 	 * 默认颜色的值
-	 * @expiremrnt 可能会删除，初始化时决定线性范围，他会根据颜色的 slider 来变化
+	 * @expiremrnt 决定线性范围，他会根据颜色的 slider 来变化
 	 * @type string | RgbaColor | HsvaColor;
 	 * @default ''
 	 */
@@ -199,7 +199,6 @@ export type KColorPickerFormatProps = {
 // TODO: Kdropdownitem
 // TODO: input show format
 
-// TODO 📌0000时拽不动
 // TODO 📌360 时变成了0
 // TODO: 📌拖拽优化
 export interface RgbaColor {