feat: add EyeDropper API support to color-picker#2582
Open
zjh0326 wants to merge 2 commits into
Open
Conversation
16 tasks
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
Close #2568
💡 需求背景和解决方案
1. 要解决的具体问题
在选色时,用户需要直接在页面中取色而不是手动调整面板。例如:用户上传一张背景图后想调整页面背景色,希望可以直接吸色而不是手动编辑。
现有组件不支持浏览器原生的 EyeDropper API(Chrome/Edge 95+),用户无法快速从页面取色。
2. 最终的 API 实现和用法
新增工具函数(
tdesign-common/js/color-picker/eyedropper.ts):isEyeDropperSupported(): boolean— 检测浏览器是否支持 EyeDropper APIpickColor(): Promise<string>— 打开系统取色器并返回选取的颜色值(hex 格式)ColorPicker 组件变动:
Esc取消取色时,组件不会报错(优雅处理)3. UI/交互变动截图
ColorPicker 面板头部右侧的滴管按钮

📝 更新日志
tdesign-vue-next
☑️ 请求合并前的自查清单
'eyedropper'到ColorPickerChangeTrigger类型)📌 备注
This PR Depends on: Tencent/tdesign-vue-next#6763