Skip to content

feat: add EyeDropper API support to color-picker#2582

Open
zjh0326 wants to merge 2 commits into
Tencent:developfrom
zjh0326:feature/eye-dropper
Open

feat: add EyeDropper API support to color-picker#2582
zjh0326 wants to merge 2 commits into
Tencent:developfrom
zjh0326:feature/eye-dropper

Conversation

@zjh0326

@zjh0326 zjh0326 commented Jul 1, 2026

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

Close #2568

💡 需求背景和解决方案

1. 要解决的具体问题

在选色时,用户需要直接在页面中取色而不是手动调整面板。例如:用户上传一张背景图后想调整页面背景色,希望可以直接吸色而不是手动编辑。

现有组件不支持浏览器原生的 EyeDropper API(Chrome/Edge 95+),用户无法快速从页面取色。

2. 最终的 API 实现和用法

  • 新增工具函数tdesign-common/js/color-picker/eyedropper.ts):

    • isEyeDropperSupported(): boolean — 检测浏览器是否支持 EyeDropper API
    • pickColor(): Promise<string> — 打开系统取色器并返回选取的颜色值(hex 格式)
  • ColorPicker 组件变动

    • 在面板头部右侧新增"吸色"按钮(滴管图标)
    • 按钮只在浏览器支持 EyeDropper API 时显示(Chrome/Edge 95+)
    • 点击按钮打开系统取色器,选取后自动更新 ColorPicker 的颜色值
    • 用户按 Esc 取消取色时,组件不会报错(优雅处理)

3. UI/交互变动截图

ColorPicker 面板头部右侧的滴管按钮
图片

📝 更新日志

  • feat(color-picker): 添加 EyeDropper API 工具函数
  • 本条 PR 不需要纳入 Changelog

tdesign-vue-next

  • feat(ColorPicker): 支持吸色功能,使用原生 EyeDropper API 实现页面取色

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

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

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充(已添加 'eyedropper'ColorPickerChangeTrigger 类型)
  • Changelog 已提供或无须提供

📌 备注

This PR Depends on: Tencent/tdesign-vue-next#6763

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.

[ColorPicker] 支持吸色

2 participants