Skip to content

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

Open
yuxi-ovo wants to merge 1 commit into
Tencent:developfrom
yuxi-ovo:develop
Open

feat(color-picker): add native EyeDropper API support#2647
yuxi-ovo wants to merge 1 commit into
Tencent:developfrom
yuxi-ovo:develop

Conversation

@yuxi-ovo

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

#2568

💡 需求背景和解决方案

需求背景

目前 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 已提供或无须提供

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.

2 participants