Skip to content

feat(Dialog): 组件支持更多格式 dialogClassName #804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RSS1102 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(Dialog): 组件支持更多格式 dialogClassName #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37487d8
feat(Dialog): 组件支持更多格式 dialogClassName
RSS1102 Jan 19, 2026
e260351
chore: resolve conflict
github-actions[bot] Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion packages/products/tdesign-react/packages/components/dialog/dialog.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ confirmBtn | TNode | - | Typescript: `string \| ButtonProps \| TNode \| null`。
confirmLoading | Boolean | undefined | confirm button loading status | N
confirmOnEnter | Boolean | - | confirm on enter | N
destroyOnClose | Boolean | false | \- | N
dialogClassName | String | - | \- | N
dialogClassName | String / Object / Array | - | The class name for the popover content section, supporting multiple formats: string (e.g., `'name1 name2 name3'`), array (e.g., `['name1', 'name2']`), or array of objects (e.g., `[{ 'name1': true }]`)。Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
draggable | Boolean | false | not effective in `full-screen` mode | N
footer | TNode | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-react/packages/components/dialog/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。
confirmLoading | Boolean | undefined | 确认按钮加载状态 | N
confirmOnEnter | Boolean | - | 是否在按下回车键时，触发确认事件 | N
destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
dialogClassName | String | - | 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' | N
dialogClassName | String / Object / Array | - | 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`）。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
draggable | Boolean | false | 是否可以拖拽（对全屏对话框无效） | N
footer | TNode | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
Expand Down
7 changes: 3 additions & 4 deletions packages/products/tdesign-react/packages/components/dialog/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* */

import { ButtonProps } from '../button';
import { TNode, Styles, AttachNode } from '../common';
import { TNode, ClassName, Styles, AttachNode } from '../common';
import { MouseEvent, KeyboardEvent } from 'react';

export interface TdDialogProps {
Expand Down Expand Up @@ -56,10 +56,9 @@ export interface TdDialogProps {
*/
destroyOnClose?: boolean;
/**
* 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'
* @default ''
* 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`）
*/
dialogClassName?: string;
dialogClassName?: ClassName;
/**
* 作用于对话框本身的样式
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-vue-next/packages/components/dialog/dialog.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ confirmLoading | Boolean | undefined | confirm button loading status | N
confirmOnEnter | Boolean | - | confirm on enter | N
default | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
destroyOnClose | Boolean | false | \- | N
dialogClassName | String | - | \- | N
dialogClassName | String / Object / Array | - | The class name for the popover content section, supporting multiple formats: string (e.g., `'name1 name2 name3'`), array (e.g., `['name1', 'name2']`), or array of objects (e.g., `[{ 'name1': true }]`)。Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
draggable | Boolean | false | not effective in `full-screen` mode | N
footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-vue-next/packages/components/dialog/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ confirmLoading | Boolean | undefined | 确认按钮加载状态 | N
confirmOnEnter | Boolean | - | 是否在按下回车键时，触发确认事件 | N
default | String / Slot / Function | - | 对话框内容，同 body。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
dialogClassName | String | - | 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' | N
dialogClassName | String / Object / Array | - | 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`）。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
draggable | Boolean | false | 是否可以拖拽（对全屏对话框无效） | N
footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
Expand Down
5 changes: 2 additions & 3 deletions packages/products/tdesign-vue-next/packages/components/dialog/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,9 @@ export default {
},
/** 是否在关闭弹框的时候销毁子元素 */
destroyOnClose: Boolean,
/** 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' */
/** 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`） */
dialogClassName: {
type: String,
default: '',
type: [String, Object, Array] as PropType<TdDialogProps['dialogClassName']>,
},
/** 作用于对话框本身的样式 */
dialogStyle: {
Expand Down
7 changes: 3 additions & 4 deletions packages/products/tdesign-vue-next/packages/components/dialog/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* */

import { ButtonProps } from '../button';
import { TNode, Styles, AttachNode, AppContext } from '../common';
import { TNode, ClassName, Styles, AttachNode, AppContext } from '../common';

export interface TdDialogProps {
/**
Expand Down Expand Up @@ -55,10 +55,9 @@ export interface TdDialogProps {
*/
destroyOnClose?: boolean;
/**
* 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'
* @default ''
* 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`）
*/
dialogClassName?: string;
dialogClassName?: ClassName;
/**
* 作用于对话框本身的样式
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-vue/src/dialog/dialog.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ confirmLoading | Boolean | undefined | confirm button loading status | N
confirmOnEnter | Boolean | - | confirm on enter | N
default | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
destroyOnClose | Boolean | false | \- | N
dialogClassName | String | - | \- | N
dialogClassName | String / Object / Array | - | The class name for the popover content section, supporting multiple formats: string (e.g., `'name1 name2 name3'`), array (e.g., `['name1', 'name2']`), or array of objects (e.g., `[{ 'name1': true }]`)。Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
draggable | Boolean | false | not effective in `full-screen` mode | N
footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-vue/src/dialog/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ confirmLoading | Boolean | undefined | 确认按钮加载状态 | N
confirmOnEnter | Boolean | - | 是否在按下回车键时，触发确认事件 | N
default | String / Slot / Function | - | 对话框内容，同 body。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
dialogClassName | String | - | 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' | N
dialogClassName | String / Object / Array | - | 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`）。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
draggable | Boolean | false | 是否可以拖拽（对全屏对话框无效） | N
footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
Expand Down
5 changes: 2 additions & 3 deletions packages/products/tdesign-vue/src/dialog/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,9 @@ export default {
},
/** 是否在关闭弹框的时候销毁子元素 */
destroyOnClose: Boolean,
/** 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' */
/** 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`） */
dialogClassName: {
type: String,
default: '',
type: [String, Object, Array] as PropType<TdDialogProps['dialogClassName']>,
},
/** 作用于对话框本身的样式 */
dialogStyle: {
Expand Down
7 changes: 3 additions & 4 deletions packages/products/tdesign-vue/src/dialog/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* */

import { ButtonProps } from '../button';
import { TNode, Styles, AttachNode, AppContext } from '../common';
import { TNode, ClassName, Styles, AttachNode, AppContext } from '../common';

export interface TdDialogProps {
/**
Expand Down Expand Up @@ -55,10 +55,9 @@ export interface TdDialogProps {
*/
destroyOnClose?: boolean;
/**
* 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'
* @default ''
* 内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`）
*/
dialogClassName?: string;
dialogClassName?: ClassName;
/**
* 作用于对话框本身的样式
*/
Expand Down
14 changes: 9 additions & 5 deletions packages/scripts/api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45979,18 +45979,20 @@
"field_category": 1,
"field_name": "dialogClassName",
"field_type": [
"1"
"1",
"8",
"16"
],
"field_default_value": "",
"field_enum": "",
"field_desc_zh": "弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'",
"field_desc_en": null,
"field_desc_zh": "内容部分的类名，支持多种格式：字符串（例如 `'name1 name2 name3'`）、数组（例如 `['name1', 'name2']`）或对象数组（例如 `[{ 'name1': true }]`）",
"field_desc_en": "The class name for the popover content section, supporting multiple formats: string (e.g., `'name1 name2 name3'`), array (e.g., `['name1', 'name2']`), or array of objects (e.g., `[{ 'name1': true }]`)",
"field_required": 0,
"event_input": "",
"create_time": "2024-02-23 10:23:24",
"update_time": "2024-02-23 10:23:24",
"event_output": null,
"custom_field_type": null,
"custom_field_type": "ClassName",
"syntactic_sugar": null,
"readonly": 1,
"html_attribute": 0,
Expand All @@ -46005,7 +46007,9 @@
"React(PC)"
],
"field_type_text": [
"String"
"String",
"Object",
"Array"
]
},
{
Expand Down