Skip to content

feat(MessagePlugin): first parameter supports TNode #6085

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
wants to merge 7 commits into
base: develop
Choose a base branch
from
+74 −239
Open

feat(MessagePlugin): first parameter supports TNode #6085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
446645b
feat(MessagePlugin): first parameter supports `TNode`
RylanBot Oct 22, 2025
3739ef2
docs: update type
RylanBot Oct 22, 2025
5de90fb
Merge remote-tracking branch 'origin' into rylan/fix/message/TNode
RylanBot Oct 23, 2025
53f1669
chore: update common and import path
RylanBot Oct 23, 2025
cd04c20
docs: update `String` to `string`
RylanBot Oct 23, 2025
613cdc0
chore: update common
github-actions[bot] Oct 23, 2025
e3d3ff1
chore: merge develop
github-actions[bot] Oct 23, 2025
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
2 changes: 1 addition & 1 deletion packages/common
Open in desktop
Submodule common updated 8 files
+8 −0 js/image-viewer/types.d.ts
+95 −0 js/image-viewer/utils.ts
+108 −0 js/message/animation.ts
+56 −0 js/message/consts.ts
+2 −0 js/message/index.ts
+1 −1 style/mobile/components/cascader/_index.less
+1 −1 style/mobile/components/cascader/_var.less
+1 −0 style/mobile/components/upload/_index.less
62 changes: 0 additions & 62 deletions packages/components/message/consts/index.ts
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions packages/components/message/message-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { computed, defineComponent, ref } from 'vue';
import type { CSSProperties } from 'vue';
import { PLACEMENT_OFFSET } from './consts';
import TMessage from './message';
import { MessageOptions } from './type';
import { PLACEMENT_OFFSET } from '@tdesign/common-js/message/index';
import { usePrefixClass } from '@tdesign/shared-hooks';
import TMessage from './message';
import type { MessageOptions } from './type';

export const DEFAULT_Z_INDEX = 6000;

Expand Down
14 changes: 7 additions & 7 deletions packages/components/message/message.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ zIndex | Number | 5000 | \- | N
name | params | default | description
-- | -- | -- | --
theme | String | - | required。Typescript：`MessageThemeList`
message | String / Object | - | required。Typescript：`string \| MessageOptions`
message | String / Object | - | required。Typescript：`string \| TNode \| MessageOptions`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | \-
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

Expand All @@ -52,7 +52,7 @@ context | \- | - | Typescript：`AppContext`。[see more ts definition](https://

name | params | default | description
-- | -- | -- | --
message | String / Object | - | required。Typescript：`string \| MessageInfoOptions` `type MessageInfoOptions = Omit<MessageOptions, 'theme'>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/message/type.ts)
message | String / Object | - | required。Typescript：`string \| TNode \| MessageInfoOptions` `type MessageInfoOptions = Omit<MessageOptions, 'theme'>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/message/type.ts)
duration | Number | 3000 | \-
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

Expand All @@ -62,7 +62,7 @@ context | \- | - | Typescript：`AppContext`。[see more ts definition](https://

name | params | default | description
-- | -- | -- | --
message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
message | String / Object | - | required。Typescript：`string \| TNode \| MessageInfoOptions`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | \-
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

Expand All @@ -72,7 +72,7 @@ context | \- | - | Typescript：`AppContext`。[see more ts definition](https://

name | params | default | description
-- | -- | -- | --
message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
message | String / Object | - | required。Typescript：`string \| TNode \| MessageInfoOptions`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | \-
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

Expand All @@ -82,7 +82,7 @@ context | \- | - | Typescript：`AppContext`。[see more ts definition](https://

name | params | default | description
-- | -- | -- | --
message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
message | String / Object | - | required。Typescript：`string \| TNode \| MessageInfoOptions`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | \-
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

Expand All @@ -92,7 +92,7 @@ context | \- | - | Typescript：`AppContext`。[see more ts definition](https://

name | params | default | description
-- | -- | -- | --
message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
message | String / Object | - | required。Typescript：`string \| TNode \| MessageInfoOptions`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | \-
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

Expand All @@ -102,7 +102,7 @@ context | \- | - | Typescript：`AppContext`。[see more ts definition](https://

name | params | default | description
-- | -- | -- | --
message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
message | String / Object | - | required。Typescript：`string \| TNode \| MessageInfoOptions`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | \-
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

Expand Down
59 changes: 29 additions & 30 deletions packages/components/message/message.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,14 @@
{{ plugin }}

## API

### Message Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
content | String / Slot / Function | - | 用于自定义消息弹出内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 | N
icon | Boolean / Slot / Function | true | 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
theme | String | info | 消息组件风格。可选项：info/success/warning/error/question/loading。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error' \| 'question' \| 'loading'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/message/type.ts) | N
onClose | Function | | TS 类型：`(context: { trigger: 'close-click' \| 'duration-end', e?: MouseEvent }) => void`<br/>关闭消息时触发 | N
Expand All @@ -54,109 +55,107 @@ duration-end | \- | 计时结束后触发

### MessageOptions

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
attach | String / Function | 'body' | 指定弹框挂载的父节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
className | String | - | 类名 | N
offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
placement | String | top | 弹出消息位置。可选项：center/top/left/right/bottom/top-left/top-right/bottom-left/bottom-right。TS 类型：`MessagePlacementList` `type MessagePlacementList = 'center' \| 'top' \| 'left' \| 'right' \| 'bottom' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/message/type.ts) | N
style | Object | - | 内敛样式。TS 类型：`CSSProperties` | N
zIndex | Number | 5000 | 消息层级 | N
`MessageProps` | \- | - | 继承 `MessageProps` 中的全部 API | N
`MessageProps` | \- | - | 继承 `MessageProps` 中的全部属性 | N

### MessagePlugin

同时也支持 `this.$message`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
theme | String | - | 必需。消息类型。TS 类型：`MessageThemeList`
message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions`
message | String / Object | - | 必需。消息内容。TS 类型：`string \| TNode \| MessageOptions`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

### MessagePlugin.info

同时也支持 `this.$message.info`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageInfoOptions` `type MessageInfoOptions = Omit<MessageOptions, 'theme'>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/message/type.ts)
message | String / Object | - | 必需。消息内容。TS 类型：`string \| TNode \| MessageInfoOptions` `type MessageInfoOptions = Omit<MessageOptions, 'theme'>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/message/type.ts)
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

### MessagePlugin.error

同时也支持 `this.$message.error`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageInfoOptions`
message | String / Object | - | 必需。消息内容。TS 类型：`string \| TNode \| MessageInfoOptions`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

### MessagePlugin.warning

同时也支持 `this.$message.warning`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageInfoOptions`
message | String / Object | - | 必需。消息内容。TS 类型：`string \| TNode \| MessageInfoOptions`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

### MessagePlugin.success

同时也支持 `this.$message.success`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageInfoOptions`
message | String / Object | - | 必需。消息内容。TS 类型：`string \| TNode \| MessageInfoOptions`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

### MessagePlugin.loading

同时也支持 `this.$message.loading`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
message | String / Object | - | 必需。消息提醒内容。TS 类型：`string \| MessageInfoOptions`
message | String / Object | - | 必需。消息提醒内容。TS 类型：`string \| TNode \| MessageInfoOptions`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

### MessagePlugin.question

同时也支持 `this.$message.question`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageInfoOptions`
message | String / Object | - | 必需。消息内容。TS 类型：`string \| TNode \| MessageInfoOptions`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)

### MessagePlugin.close

同时也支持 `this.$message.close`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
options | Object | - | 必需。该插件参数为 $Message.info() 等插件执行后的返回值。示例：`const msg = $Message.info({}); $Message.close(msg)`。TS 类型：`Promise<MessageInstance>`

### MessagePlugin.closeAll

同时也支持 `this.$message.closeAll`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
\- | \- | - | \-

### MessagePlugin.config

同时也支持 `this.$message.config`。

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
message | Object | - | 必需。全局提醒插件全局配置。TS 类型：`MessageOptions`
15 changes: 6 additions & 9 deletions packages/components/message/message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import { defineComponent, h, onBeforeMount, onMounted, computed, ref } from 'vue';
import { computed, defineComponent, h, onBeforeMount, onMounted, ref } from 'vue';
import {
InfoCircleFilledIcon as TdInfoCircleFilledIcon,
CheckCircleFilledIcon as TdCheckCircleFilledIcon,
CloseIcon as TdCloseIcon,
ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
HelpCircleFilledIcon as TdHelpCircleFilledIcon,
CloseIcon as TdCloseIcon,
InfoCircleFilledIcon as TdInfoCircleFilledIcon,
} from 'tdesign-icons-vue-next';
import { isFunction } from 'lodash-es';

import { THEME_LIST, fadeIn, fadeOut } from '@tdesign/common-js/message/index';
import { useContent, useGlobalIcon, usePrefixClass, useTNodeJSX } from '@tdesign/shared-hooks';
import TLoading from '../loading';
import { THEME_LIST } from './consts';
import props from './props';
import { useContent, useTNodeJSX, useGlobalIcon, usePrefixClass } from '@tdesign/shared-hooks';

import { fadeIn, fadeOut } from './utils';

import { isFunction } from 'lodash-es';

export default defineComponent({
name: 'TMessage',
Expand Down
Loading
Loading