From 942d824e44a188d5b8e09fbb6bfc81e0cdfdb786 Mon Sep 17 00:00:00 2001 From: zjh0326 <1286638188@qq.com> Date: Wed, 1 Jul 2026 16:32:36 +0800 Subject: [PATCH 1/3] feat: add eye-dropper button to ColorPicker panel header --- .../color-picker/components/panel/header.tsx | 41 ++++++++++++++++++- .../color-picker/components/panel/index.tsx | 19 ++++++++- .../color-picker/utils/eyedropper.js | 21 ++++++++++ 3 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 packages/components/color-picker/utils/eyedropper.js diff --git a/packages/components/color-picker/components/panel/header.tsx b/packages/components/color-picker/components/panel/header.tsx index 90426793a8..35cfee99d3 100644 --- a/packages/components/color-picker/components/panel/header.tsx +++ b/packages/components/color-picker/components/panel/header.tsx @@ -2,6 +2,8 @@ import { defineComponent, PropType, ref, watch } from 'vue'; import { COLOR_MODES } from '@tdesign/common-js/color-picker/constants'; import { useConfig } from '@tdesign/shared-hooks'; +import { isEyeDropperSupported, pickColor } from '../../utils/eyedropper.js'; +import { Button as TButton } from '../../../button'; import { RadioButton as TRadioButton, RadioGroup as TRadioGroup } from '../../../radio'; import props from '../../color-picker-panel-props'; import { useBaseClassName } from '../../hooks'; @@ -21,12 +23,31 @@ export default defineComponent({ return () => {}; }, }, + onEyeDropperPick: { + type: Function, + default: () => { + return () => {}; + }, + }, }, - setup(props) { + emits: ['mode-change', 'eyedropper-pick'], + setup(props, { emit }) { const { globalConfig } = useConfig('colorPicker'); const baseClassName = useBaseClassName(); const modeValue = ref(props.mode); const handleModeChange = (v: string) => props.onModeChange(v); + const handleEyeDropperPick = async () => { + try { + console.log('[EyeDropper Header] Button clicked!'); + const color = await pickColor(); + console.log('[EyeDropper Header] Color picked:', color); + console.log('[EyeDropper Header] Calling onEyeDropperPick prop...'); + props.onEyeDropperPick(color); + console.log('[EyeDropper Header] onEyeDropperPick called!'); + } catch (error: any) { + console.warn('EyeDropper pick failed:', error); + } + }; watch( () => props.mode, (v) => (modeValue.value = v), @@ -46,6 +67,24 @@ export default defineComponent({ ))} + {isEyeDropperSupported() ? ( +
+ + + + + + + + + +
+ ) : null} ); }; diff --git a/packages/components/color-picker/components/panel/index.tsx b/packages/components/color-picker/components/panel/index.tsx index 9688bab301..f029dbe5f8 100644 --- a/packages/components/color-picker/components/panel/index.tsx +++ b/packages/components/color-picker/components/panel/index.tsx @@ -98,6 +98,23 @@ export default defineComponent({ }); }; + /** + * 处理吸色事件 + * @param pickedColor 吸色器返回的颜色值（hex格式） + */ + const handleEyeDropperPick = (pickedColor: string) => { + console.log('[EyeDropper] Picked color:', pickedColor); + // 更新颜色状态 + color.value.update(pickedColor); + console.log('[EyeDropper] Color after update:', color.value.rgba); + // 强制更新 innerValue（触发响应式） + innerValue.value = color.value.getFormattedColor(props.format, props.enableAlpha); + console.log('[EyeDropper] innerValue after update:', innerValue.value); + // 触发变更事件 + emitColorChange('eyedropper'); + console.log('[EyeDropper] emitColorChange called'); + }; + watch( () => innerValue.value, (newColor) => { @@ -289,7 +306,7 @@ export default defineComponent({ return (
- +
{isGradient.value ? ( } 返回 hex 格式颜色值（如 "#123456"） + */ +export async function pickColor() { + if (!isEyeDropperSupported()) { + throw new Error('EyeDropper API is not supported in this browser'); + } + + const eyeDropper = new window.EyeDropper(); + const result = await eyeDropper.open(); + return result.sRGBHex; +} From 08235661ab593dc910a858d830a14d7168c0aa8c Mon Sep 17 00:00:00 2001 From: zjh0326 <1286638188@qq.com> Date: Wed, 1 Jul 2026 17:25:06 +0800 Subject: [PATCH 2/3] feat: add eye-dropper support to ColorPicker component - Add eyedropper.ts utility in tdesign-common - Add eye-dropper button to ColorPicker panel header - Support color picking via native EyeDropper API - Button only shows when browser supports the API (Chrome/Edge 95+) - Handle errors when user cancels picking - Add 'eyedropper' to ColorPickerChangeTrigger type - Replace title with tip prop in Button component - Remove console.log statements for production readiness --- .../color-picker/components/panel/header.tsx | 35 ++++++++++--------- .../color-picker/components/panel/index.tsx | 11 +++--- packages/components/color-picker/type.ts | 3 +- 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/packages/components/color-picker/components/panel/header.tsx b/packages/components/color-picker/components/panel/header.tsx index 35cfee99d3..ca88e50cb1 100644 --- a/packages/components/color-picker/components/panel/header.tsx +++ b/packages/components/color-picker/components/panel/header.tsx @@ -38,12 +38,8 @@ export default defineComponent({ const handleModeChange = (v: string) => props.onModeChange(v); const handleEyeDropperPick = async () => { try { - console.log('[EyeDropper Header] Button clicked!'); const color = await pickColor(); - console.log('[EyeDropper Header] Color picked:', color); - console.log('[EyeDropper Header] Calling onEyeDropperPick prop...'); props.onEyeDropperPick(color); - console.log('[EyeDropper Header] onEyeDropperPick called!'); } catch (error: any) { console.warn('EyeDropper pick failed:', error); } @@ -69,19 +65,24 @@ export default defineComponent({
{isEyeDropperSupported() ? (
- - - - - - - - + + + + + + + +
) : null} diff --git a/packages/components/color-picker/components/panel/index.tsx b/packages/components/color-picker/components/panel/index.tsx index f029dbe5f8..109231fc88 100644 --- a/packages/components/color-picker/components/panel/index.tsx +++ b/packages/components/color-picker/components/panel/index.tsx @@ -103,16 +103,12 @@ export default defineComponent({ * @param pickedColor 吸色器返回的颜色值（hex格式） */ const handleEyeDropperPick = (pickedColor: string) => { - console.log('[EyeDropper] Picked color:', pickedColor); // 更新颜色状态 color.value.update(pickedColor); - console.log('[EyeDropper] Color after update:', color.value.rgba); // 强制更新 innerValue（触发响应式） innerValue.value = color.value.getFormattedColor(props.format, props.enableAlpha); - console.log('[EyeDropper] innerValue after update:', innerValue.value); // 触发变更事件 emitColorChange('eyedropper'); - console.log('[EyeDropper] emitColorChange called'); }; watch( @@ -306,7 +302,12 @@ export default defineComponent({ return (
- +
{isGradient.value ? ( Date: Wed, 29 Jul 2026 11:18:26 +0000 Subject: [PATCH 3/3] chore: update common to PR 2582 --- packages/common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common b/packages/common index 5aedfdf7ab..916c9f675f 160000 --- a/packages/common +++ b/packages/common @@ -1 +1 @@ -Subproject commit 5aedfdf7ab0457141b0a886d2126e22bbdb42cae +Subproject commit 916c9f675fb43697b0a08f6c3155f219e8897e35