Skip to content

feat(color-picker): add eyedropper utility and styles - #2624

Open
LiamFan16-mikasa wants to merge 1 commit into
Tencent:developfrom
LiamFan16-mikasa:feat/color-picker-eyedropper
Open

feat(color-picker): add eyedropper utility and styles#2624
LiamFan16-mikasa wants to merge 1 commit into
Tencent:developfrom
LiamFan16-mikasa:feat/color-picker-eyedropper

Conversation

@LiamFan16-mikasa

@LiamFan16-mikasa LiamFan16-mikasa commented Jul 10, 2026

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

closes #2568

💡 需求背景和解决方案

ColorPicker 需要支持吸色,本 PR 补充跨框架共享的公共部分:

  1. js/color-picker/eyedropper.ts:封装浏览器原生 EyeDropper API。isEyeDropperSupported() 做能力检测(SSR 环境返回 false);openEyeDropper({ signal? }) 返回选中的色值并统一转小写 #rrggbb(与 <input type="color"> 的 value 语义一致,规范未强制 sRGBHex 大小写),用户取消(Esc / AbortSignal)或异常时返回 null,调用方无需 try/catch
  2. style/web/components/color-picker/_index.less:新增 __eyedropper 类。视觉规则直接复用既有的 __icon(框架侧按钮同时挂载两个类),此处仅补充原生 button 元素的复位与固定尺寸,不引入重复样式与新 token
  3. test/unit/color-picker/eyedropper.test.ts:9 个用例,覆盖 SSR、非构造器全局值、取色成功、大小写归一化、AbortSignal 透传、用户取消、异常兜底
  4. docs/web/api/color-picker.md / .en-US.md:新增「吸管取色」demo 条目({{ eye-dropper }}

框架侧的属性定义(eyeDropper)、按钮渲染、取色后的颜色更新逻辑见配套 PR Tencent/tdesign-vue-next#6796,效果 GIF 亦见该 PR。

📝 更新日志

  • feat(color-picker): 新增 EyeDropper 吸色工具函数与吸色按钮样式
  • 本条 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.

[ColorPicker] 支持吸色

2 participants