Skip to content

feat(color-picker): add eyedropper API - #2667

Open
yzh505 wants to merge 2 commits into
Tencent:developfrom
yzh505:feat/color-picker-eyedropper-clean
Open

feat(color-picker): add eyedropper API#2667
yzh505 wants to merge 2 commits into
Tencent:developfrom
yzh505:feat/color-picker-eyedropper-clean

Conversation

@yzh505

@yzh505 yzh505 commented Aug 11, 2026

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

#2568

🔗 相关pr

Tencent/tdesign-vue-next#6823

💡 需求背景和解决方案

ColorPicker 目前只能通过面板手动调整颜色。业务中存在上传背景图后,需要直接从图片或页面中吸取颜色的场景,因此需要支持吸色能力。

解决方案
新增 ColorPicker 吸色公共能力:

  • 新增 EyeDropper 工具函数,默认使用浏览器原生 EyeDropper API
  • 支持可选 fallback 模式:配置 { mode: 'fallback' } 时,在不支持原生 API 的浏览器中使用 html2canvas-pro 截取当前页面并读取 canvas 像素。
  • 新增吸色按钮相关样式,按钮推荐放置在颜色条前。
  • 浏览器不支持时按钮可展示禁用态,而不是隐藏。
  • 用户取消、取色失败或组件卸载时不触发 change。

结果展示
吸色器效果

📝 更新日志

  • fix(组件名称): 处理问题或特性描述 ...

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • [√] 文档已补充或无须补充
  • [√] 代码演示已提供或无须提供
  • [√] TypeScript 定义已补充或无须补充
  • [√] Changelog 已提供或无须提供

@yzh505
yzh505 force-pushed the feat/color-picker-eyedropper-clean branch from 3b89aef to 7a0c0e7 Compare August 11, 2026 10:53
@yzh505 yzh505 closed this Aug 11, 2026
@yzh505 yzh505 reopened this Aug 11, 2026
@yzh505 yzh505 mentioned this pull request Aug 11, 2026
12 tasks
@uyarn uyarn changed the title Feat/color picker eyedropper clean feat(color-picker): add eyedropper API Aug 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants