Skip to content

[犀牛鸟]feat(ColorPicker): support eyedropper color picking - #6796

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

[犀牛鸟]feat(ColorPicker): support eyedropper color picking#6796
LiamFan16-mikasa wants to merge 4 commits 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 Tencent/tdesign-common#2568

配套 PR:

💡 需求背景和解决方案

要解决的问题:用户需要直接从屏幕取色(如上传背景图后取图中颜色调整页面背景),现有 ColorPicker 只能手动调整面板(详见 issue)。

API 设计:新增 eyeDropper 属性(Boolean,默认 falseColorPickerColorPickerPanel 均支持)。开启后面板顶部显示吸色按钮,基于浏览器原生 EyeDropper APIonChangecontext.trigger 新增 'eyedropper'

实现要点

  1. 按钮使用官方 tdesign-icons-vue-nextSipIcon(经 useGlobalIcon,支持全局图标替换),样式复用 common 侧 t-color-picker__eyedropper 类(feat(color-picker): add eyedropper utility and styles tdesign-common#2624
  2. 浏览器不支持 EyeDropper API 时按钮呈禁用态(t-is-disabled + 原生 disabled)而非隐藏,用户可感知功能存在;colorModes 仅单模式时按钮仍正常显示
  3. 取色走 Color.update() 既有路径:单色模式更新整体颜色,渐变模式仅更新当前选中的渐变节点(与输入框行为一致,不会把渐变覆盖为单色)
  4. enableAlpha 时保留吸色前的透明度(EyeDropper 只返回不透明 hex,透明度只由 alpha 滑条控制)
  5. 组件卸载时通过 AbortSignal 中断进行中的取色;用户 Esc 取消不触发 change、无报错
  6. 工具函数暂在组件内实现(utils/eyedropper.ts),与 feat(color-picker): add eyedropper utility and styles tdesign-common#2624js/color-picker/eyedropper.ts 完全同 API,该 PR 合并、submodule 更新后可一行切换为公共导入

交互效果

因吸色盘在gif图中未被截取,故附截图辅助显示效果
14a824fbd66a9e932ea71bde2a2a63aa

chrome-capture-2026-07-10

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-vue-next

  • feat(ColorPicker): 新增 eyeDropper 属性,支持使用浏览器原生 EyeDropper API 从屏幕吸色

@tdesign-vue-next/chat

@tdesign-vue-next/nuxt

@tdesign-vue-next/auto-import-resolver

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

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

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

@Wesley-0808 Wesley-0808 changed the title feat(ColorPicker): support eyedropper color picking [犀牛鸟]feat(ColorPicker): support eyedropper color picking Jul 20, 2026
@uyarn

uyarn commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

/update-common 2624

@uyarn uyarn added the 💭 discussion we are discussing label Jul 29, 2026
@tdesign-bot

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 29, 2026

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

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

commit: 3591b5e

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.

[ColorPicker] 支持吸色

3 participants