From 9f7c48565d37ed0ab3cc1b64cfefa71ca6f4d04c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E6=99=A8=20=28Leo=20Cheng=29?=
 <leo-cheng@vip.qq.com>
Date: Fri, 10 Jul 2026 10:27:32 +0800
Subject: [PATCH] feat(color-picker): add eyeDropper prop, emit eyedropper-tap
 event
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 林晨 (Leo Cheng) <leo-cheng@vip.qq.com>
---
 .../components/color-picker/color-picker.less | 23 +++++++++++++++++++
 .../components/color-picker/color-picker.ts   |  6 +++++
 .../components/color-picker/interfaces.ts     |  3 ++-
 packages/components/color-picker/props.ts     |  4 ++++
 .../components/color-picker/template.wxml     |  4 ++++
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/components/color-picker/color-picker.less b/packages/components/color-picker/color-picker.less
index 26e82e9067..6b0a14a0c2 100644
--- a/packages/components/color-picker/color-picker.less
+++ b/packages/components/color-picker/color-picker.less
@@ -348,6 +348,29 @@
   }
 }
 
+.@{prefix}-color-picker {
+  &__eyedropper-wrap {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 0 0;
+  }
+
+  &__eyedropper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font-size: 18px;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+}
+
 .transparentBgImage () {
   /* stylelint-disable-next-line color-no-hex */
   background-image:
diff --git a/packages/components/color-picker/color-picker.ts b/packages/components/color-picker/color-picker.ts
index 2a7e94ea3d..8542ecad75 100644
--- a/packages/components/color-picker/color-picker.ts
+++ b/packages/components/color-picker/color-picker.ts
@@ -398,5 +398,11 @@ export default class ColorPicker extends SuperComponent {
     onVisibleChange() {
       this.close('overlay');
     },
+
+    handleEyeDropperTap() {
+      this.triggerEvent('eyedropper-tap', {
+        color: getColorObject(this.color),
+      });
+    },
   };
 }
diff --git a/packages/components/color-picker/interfaces.ts b/packages/components/color-picker/interfaces.ts
index 4247bf1623..62e7cc514c 100644
--- a/packages/components/color-picker/interfaces.ts
+++ b/packages/components/color-picker/interfaces.ts
@@ -9,4 +9,5 @@ export type ColorPickerChangeTrigger =
   | 'palette-brightness'
   | 'palette-hue-bar'
   | 'palette-alpha-bar'
-  | 'preset';
+  | 'preset'
+  | 'eyedropper';
diff --git a/packages/components/color-picker/props.ts b/packages/components/color-picker/props.ts
index 0db99c3ddf..6536bbe0e9 100644
--- a/packages/components/color-picker/props.ts
+++ b/packages/components/color-picker/props.ts
@@ -26,6 +26,10 @@ const props: TdColorPickerProps = {
     type: Boolean,
     value: true,
   },
+  eyeDropper: {
+    type: Boolean,
+    value: false,
+  },
   /** 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true */
   fixed: {
     type: Boolean,
diff --git a/packages/components/color-picker/template.wxml b/packages/components/color-picker/template.wxml
index 61b838ac87..dea8535fb1 100644
--- a/packages/components/color-picker/template.wxml
+++ b/packages/components/color-picker/template.wxml
@@ -58,6 +58,10 @@
       </view>
     </view>
 
+    <view wx:if="{{eyeDropper && isMultiple}}" class="{{classPrefix}}__eyedropper-wrap">
+      <view class="{{classPrefix}}__eyedropper" catch:tap="handleEyeDropperTap">🎨</view>
+    </view>
+
     <view class="{{classPrefix}}__format" wx:if="{{isMultiple}}">
       <view class="{{classPrefix}}__format-item {{classPrefix}}__format-item--first"> {{format}} </view>
       <view class="{{classPrefix}}__format-item {{classPrefix}}__format-item--second">