[犀牛鸟]feat: add eye-dropper support to ColorPicker component - #6763
Open
zjh0326 wants to merge 5 commits into
Open
[犀牛鸟]feat: add eye-dropper support to ColorPicker component#6763zjh0326 wants to merge 5 commits into
zjh0326 wants to merge 5 commits into
Conversation
- 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
zjh0326
requested review from
Cat1007,
PengYYYYY,
Wesley-0808,
chaishi,
liweijie0812,
uyarn,
zhangpaopao0609 and
zydemail
as code owners
July 1, 2026 09:42
16 tasks
Wesley-0808
changed the title
Collaborator
TDesign Component Site Preview Open
|
commit: |
Collaborator
|
/update-common 2582 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？
🔗 相关 Issue
Close #2568
💡 需求背景和解决方案
1. 要解决的具体问题
在选色时，用户需要直接在页面中取色而不是手动调整面板。例如：用户上传一张背景图后想调整页面背景色，希望可以直接吸色而不是手动编辑。
现有组件不支持浏览器原生的 EyeDropper API（Chrome/Edge 95+），用户无法快速从页面取色。
2. 最终的 API 实现和用法
新增工具函数（
tdesign-common/js/color-picker/eyedropper.ts）：isEyeDropperSupported(): boolean— 检测浏览器是否支持 EyeDropper APIpickColor(): Promise<string>— 打开系统取色器并返回选取的颜色值（hex 格式）ColorPicker 组件变动：
Esc取消取色时，组件不会报错（优雅处理）3. UI/交互变动截图
ColorPicker 面板头部右侧的滴管按钮
📝 更新日志
tdesign-vue-next
☑️ 请求合并前的自查清单
'eyedropper'到ColorPickerChangeTrigger类型）📌 备注
本 PR 依赖于
tdesign-common仓库的修改：