From 6947902f375bdefe19dfe8e53c0237f1fbee178b Mon Sep 17 00:00:00 2001 From: ljz <470699397@qq.com> Date: Thu, 2 Jul 2026 01:04:03 +0800 Subject: [PATCH] [ColorPicker] Update API for input-less trigger --- .../color-picker/color-picker.en-US.md | 1 + .../components/color-picker/color-picker.md | 1 + .../packages/components/color-picker/props.ts | 7 +++- .../packages/components/color-picker/type.ts | 5 +++ packages/scripts/api.json | 37 +++++++++++++++++++ 5 files changed, 50 insertions(+), 1 deletion(-) diff --git a/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.en-US.md b/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.en-US.md index 5d8a2cbcd..6d32c904d 100644 --- a/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.en-US.md @@ -14,6 +14,7 @@ enableAlpha | Boolean | false | \- | N enableMultipleGradient | Boolean | true | \- | N format | String | RGB | When `enableAlpha` is true, `HEX8/RGBA/HSLA/HSVA` are valid。options: HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N +isInput | Boolean | true | Whether to display the color value input. When false, only the color swatch is displayed. | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N recentColors | Array | [] | used color recently。`v-model:recentColors` is supported。Typescript：`Array \| boolean \| null` | N defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`Array \| boolean \| null` | N diff --git a/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.md b/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.md index a5b4f8a4f..c886b0c67 100644 --- a/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.md +++ b/packages/products/tdesign-vue-next/packages/components/color-picker/color-picker.md @@ -14,6 +14,7 @@ enableAlpha | Boolean | false | 是否开启透明通道 | N enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N format | String | RGB | 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效。可选项：HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N +isInput | Boolean | true | 是否显示颜色值输入框，值为 false 时仅显示颜色色块 | N popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/color-picker/type.ts) | N recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。支持语法糖 `v-model:recentColors`。TS 类型：`Array \| boolean \| null` | N defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`Array \| boolean \| null` | N diff --git a/packages/products/tdesign-vue-next/packages/components/color-picker/props.ts b/packages/products/tdesign-vue-next/packages/components/color-picker/props.ts index 4c5b2a218..206cccdb5 100644 --- a/packages/products/tdesign-vue-next/packages/components/color-picker/props.ts +++ b/packages/products/tdesign-vue-next/packages/components/color-picker/props.ts @@ -15,7 +15,7 @@ export default { /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */ colorModes: { type: Array as PropType, - default: (): TdColorPickerProps['colorModes'] => ["monochrome", "linear-gradient"], + default: (): TdColorPickerProps['colorModes'] => ['monochrome', 'linear-gradient'], }, /** 是否禁用组件 */ disabled: { @@ -42,6 +42,11 @@ export default { inputProps: { type: Object as PropType, }, + /** 是否显示颜色值输入框，值为 false 时仅显示颜色色块 */ + isInput: { + type: Boolean, + default: true, + }, /** 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 */ popupProps: { type: Object as PropType, diff --git a/packages/products/tdesign-vue-next/packages/components/color-picker/type.ts b/packages/products/tdesign-vue-next/packages/components/color-picker/type.ts index 749de66b5..066378cc7 100644 --- a/packages/products/tdesign-vue-next/packages/components/color-picker/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/color-picker/type.ts @@ -48,6 +48,11 @@ export interface TdColorPickerProps { * 透传 Input 输入框组件全部属性 */ inputProps?: InputProps; + /** + * 是否显示颜色值输入框，值为 false 时仅显示颜色色块 + * @default true + */ + isInput?: boolean; /** * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 */ diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 46d2f9f12..5256535cc 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -37873,6 +37873,43 @@ "Object" ] }, + { + "id": 1782886172, + "platform_framework": [ + "1" + ], + "component": "ColorPicker", + "field_category": 1, + "field_name": "isInput", + "field_type": [ + "4" + ], + "field_default_value": "true", + "field_enum": "", + "field_desc_zh": "是否显示颜色值输入框，值为 false 时仅显示颜色色块", + "field_desc_en": "Whether to display the color value input. When false, only the color swatch is displayed.", + "field_required": 0, + "event_input": "", + "create_time": "2026-07-01 06:09:31", + "update_time": "2026-07-01 06:09:31", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)" + ], + "field_type_text": [ + "Boolean" + ] + }, { "id": 2122, "platform_framework": [