Skip to content

Feat/color picker eyedropper - #2637

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

Feat/color picker eyedropper#2637
yzh505 wants to merge 4 commits into
Tencent:developfrom
yzh505:feat/color-picker-eyedropper

Conversation

@yzh505

@yzh505 yzh505 commented Jul 20, 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 已提供或无须提供

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants