feat(color-picker): add eyedropper utility and styles - #2624
Open
LiamFan16-mikasa wants to merge 1 commit into
Open
feat(color-picker): add eyedropper utility and styles#2624LiamFan16-mikasa wants to merge 1 commit into
LiamFan16-mikasa wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是?
🔗 相关 Issue
closes #2568
💡 需求背景和解决方案
ColorPicker 需要支持吸色,本 PR 补充跨框架共享的公共部分:
js/color-picker/eyedropper.ts:封装浏览器原生 EyeDropper API。isEyeDropperSupported()做能力检测(SSR 环境返回 false);openEyeDropper({ signal? })返回选中的色值并统一转小写#rrggbb(与<input type="color">的 value 语义一致,规范未强制 sRGBHex 大小写),用户取消(Esc / AbortSignal)或异常时返回null,调用方无需 try/catchstyle/web/components/color-picker/_index.less:新增__eyedropper类。视觉规则直接复用既有的__icon(框架侧按钮同时挂载两个类),此处仅补充原生 button 元素的复位与固定尺寸,不引入重复样式与新 tokentest/unit/color-picker/eyedropper.test.ts:9 个用例,覆盖 SSR、非构造器全局值、取色成功、大小写归一化、AbortSignal 透传、用户取消、异常兜底docs/web/api/color-picker.md/.en-US.md:新增「吸管取色」demo 条目({{ eye-dropper }})框架侧的属性定义(
eyeDropper)、按钮渲染、取色后的颜色更新逻辑见配套 PR Tencent/tdesign-vue-next#6796,效果 GIF 亦见该 PR。📝 更新日志
☑️ 请求合并前的自查清单