Skip to content

[犀牛鸟]feat(color-picker): add native EyeDropper API support - #6838

Open
yuxi-ovo wants to merge 7 commits into
Tencent:developfrom
yuxi-ovo:zr
Open

[犀牛鸟]feat(color-picker): add native EyeDropper API support#6838
yuxi-ovo wants to merge 7 commits into
Tencent:developfrom
yuxi-ovo:zr

Conversation

@yuxi-ovo

Copy link
Copy Markdown
Contributor

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

#2568
依赖 Tencent/tdesign-common#2647

💡 需求背景和解决方案

需求背景

目前 ColorPicker 的吸色能力仅支持组件内部交互,未支持浏览器提供的原生 EyeDropper API。
Chromium 系浏览器(Chrome、Edge 等)已支持 EyeDropper API,可直接从屏幕中拾取任意颜色,能够提供更符合用户预期的吸色体验。为提升 ColorPicker 的易用性和与浏览器能力的一致性,因此为组件增加浏览器原生吸色器支持,并在不支持该 API 的浏览器中保持原有行为,不影响现有功能。

代码逻辑

  • 新增 EyeDropper 工具方法,对浏览器原生 EyeDropper API 进行统一封装。
  • 补充 TypeScript 类型声明,兼容当前 TypeScript 环境缺少 EyeDropper 类型定义的问题。
  • 在支持 EyeDropper API 的浏览器中,调用原生吸色器完成屏幕取色。
  • 对用户主动取消取色(AbortError)进行兼容处理,避免产生异常报错。
  • 判断当前浏览器是否支持 EyeDropper API ,不影响现有 ColorPicker 的使用体验。

功能演示

1f6a5c256fb3a65b70cbf8d7a29c54e3_raw.mp4

📝 更新日志

feat(color-picker): add native EyeDropper API support

  • 本条 PR 不需要纳入 Changelog

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

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

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

@tdesign-bot

tdesign-bot commented Jul 27, 2026

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-vue-next 完成
@tdesign-vue-next/chat 完成

@pkg-pr-new

pkg-pr-new Bot commented Jul 27, 2026

Copy link
Copy Markdown
  • tdesign-vue-next-demo

    npm i https://pkg.pr.new/@tdesign-vue-next/auto-import-resolver@6838
    
    npm i https://pkg.pr.new/tdesign-vue-next@6838
    
    npm i https://pkg.pr.new/@tdesign-vue-next/chat@6838
    
    npm i https://pkg.pr.new/@tdesign-vue-next/nuxt@6838
    

commit: 1b933e0

@yuxi-ovo yuxi-ovo changed the title feat(color-picker): add native EyeDropper API support [犀牛鸟]feat(color-picker): add native EyeDropper API support Jul 27, 2026
@uyarn

uyarn commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

/update-common 2647

@uyarn uyarn added the 💭 discussion we are discussing label Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💭 discussion we are discussing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants