Skip to content

Commit 446645b

Browse files
RylanBotRylanBot
committed
feat(MessagePlugin): first parameter supports TNode 
1 parent a7ca0f1 commit 446645b

File tree

4 files changed

+64
-60
lines changed

4 files changed

+64
-60
lines changed

‎packages/components/message/message.en-US.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ zIndex | Number | 5000 | \- | N
4242
name | params | default | description
4343
-- | -- | -- | --
4444
theme | String | - | required。Typescript：`MessageThemeList`
45-
message | String / Object | - | required。Typescript：`string \| MessageOptions`
45+
message | Object | - | required。Typescript：`TNode \| MessageOptions`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
4646
duration | Number | 3000 | \-
4747
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
4848

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

5353
name | params | default | description
5454
-- | -- | -- | --
55-
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)
55+
message | Object | - | required。Typescript：`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)
5656
duration | Number | 3000 | \-
5757
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
5858

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

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

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

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

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

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

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

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

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

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

‎packages/components/message/message.md‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,14 @@
3131
{{ plugin }}
3232

3333
## API
34+
3435
### Message Props
3536

36-
名称 | 类型 | 默认值 | 说明 | 必传
37+
名称 | 类型 | 默认值 | 描述 | 必传
3738
-- | -- | -- | -- | --
3839
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
3940
content | String / Slot / Function | - | 用于自定义消息弹出内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
40-
duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
41+
duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 | N
4142
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
4243
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
4344
onClose | Function | | TS 类型：`(context: { trigger: 'close-click' \| 'duration-end', e?: MouseEvent }) => void`<br/>关闭消息时触发 | N
@@ -54,109 +55,107 @@ duration-end | \- | 计时结束后触发
5455

5556
### MessageOptions
5657

57-
名称 | 类型 | 默认值 | 说明 | 必传
58+
名称 | 类型 | 默认值 | 描述 | 必传
5859
-- | -- | -- | -- | --
5960
attach | String / Function | 'body' | 指定弹框挂载的父节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
6061
className | String | - | 类名 | N
6162
offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
6263
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
6364
style | Object | - | 内敛样式。TS 类型：`CSSProperties` | N
6465
zIndex | Number | 5000 | 消息层级 | N
65-
`MessageProps` | \- | - | 继承 `MessageProps` 中的全部 API | N
66+
`MessageProps` | \- | - | 继承 `MessageProps` 中的全部属性 | N
6667

6768
### MessagePlugin
6869

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

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

7879
### MessagePlugin.info
7980

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

82-
参数名称 | 参数类型 | 参数默认值 | 参数说明
83+
参数名称 | 参数类型 | 参数默认值 | 参数描述
8384
-- | -- | -- | --
84-
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)
85+
message | Object | - | 必需。消息内容。TS 类型：`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)
8586
duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
86-
context | \- | - | 要继承的应用的上下文。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
87-
87+
context | \- | - | 要继承的应用的上下文。。TS 类型：`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
8888

8989
### MessagePlugin.error
9090

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

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

9999
### MessagePlugin.warning
100100

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

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

109109
### MessagePlugin.success
110110

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

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

119119
### MessagePlugin.loading
120120

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

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

129129
### MessagePlugin.question
130130

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

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

140139
### MessagePlugin.close
141140

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

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

148147
### MessagePlugin.closeAll
149148

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

152-
参数名称 | 参数类型 | 参数默认值 | 参数说明
151+
参数名称 | 参数类型 | 参数默认值 | 参数描述
153152
-- | -- | -- | --
154153
\- | \- | - | \-
155154

156155
### MessagePlugin.config
157156

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

160-
参数名称 | 参数类型 | 参数默认值 | 参数说明
159+
参数名称 | 参数类型 | 参数默认值 | 参数描述
161160
-- | -- | -- | --
162161
message | Object | - | 必需。全局提醒插件全局配置。TS 类型：`MessageOptions`

‎packages/components/message/plugin.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,25 @@
2323
* msg.then(instance => instance.close())
2424
*
2525
*/
26-
import { App, nextTick, Plugin, AppContext, createVNode, render, VNode } from 'vue';
27-
import MessageList, { DEFAULT_Z_INDEX } from './message-list';
26+
import { App, AppContext, createVNode, isVNode, nextTick, Plugin, render, VNode } from 'vue';
27+
import { isObject, isString } from 'lodash-es';
2828
import { getAttach } from '@tdesign/shared-utils';
29-
import {
30-
MessageOptions,
31-
MessageMethod,
32-
MessageInstance,
33-
MessageInfoMethod,
29+
import MessageList, { DEFAULT_Z_INDEX } from './message-list';
30+
31+
import type { AttachNodeReturnValue } from '../common';
32+
import type {
33+
MessageCloseAllMethod,
34+
MessageCloseMethod,
3435
MessageErrorMethod,
35-
MessageWarningMethod,
36-
MessageSuccessMethod,
36+
MessageInfoMethod,
37+
MessageInstance,
3738
MessageLoadingMethod,
39+
MessageMethod,
40+
MessageOptions,
3841
MessageQuestionMethod,
39-
MessageCloseMethod,
40-
MessageCloseAllMethod,
42+
MessageSuccessMethod,
43+
MessageWarningMethod,
4144
} from './type';
42-
import { AttachNodeReturnValue } from '../common';
43-
import { isObject, isString } from 'lodash-es';
4445

4546
// 存储不同 attach 和 不同 placement 消息列表实例
4647
const instanceMap: Map<AttachNodeReturnValue, Record<string, VNode>> = new Map();
@@ -100,11 +101,15 @@ const MessageFunction = (props: MessageOptions, context?: AppContext): Promise<M
100101

101102
const showThemeMessage: MessageMethod = (theme, params, duration, context) => {
102103
let options: MessageOptions = { theme };
103-
if (isString(params)) {
104+
105+
if (isVNode(params)) {
106+
options.content = () => params;
107+
} else if (isString(params)) {
104108
options.content = params;
105109
} else if (isObject(params) && !(params instanceof Array)) {
106110
options = { ...options, ...params };
107111
}
112+
108113
(duration || duration === 0) && (options.duration = duration);
109114
return MessageFunction(options, context);
110115
};

‎packages/components/message/type.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
/**
44
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
55
* */
6-
import { ComponentPublicInstance } from 'vue';
6+
77
import { TNode, AttachNode, AppContext } from '../common';
88

99
export interface TdMessageProps {
@@ -88,51 +88,51 @@ export type MessagePlacementList =
8888
| 'bottom-left'
8989
| 'bottom-right';
9090

91-
export interface MessageInstance extends ComponentPublicInstance {
91+
export interface MessageInstance {
9292
close: () => void;
9393
}
9494

9595
export type MessageMethod = (
9696
theme: MessageThemeList,
97-
message: string | MessageOptions,
97+
message: TNode | MessageOptions,
9898
duration?: number,
9999
context?: AppContext,
100100
) => Promise<MessageInstance>;
101101

102102
export type MessageInfoOptions = Omit<MessageOptions, 'theme'>;
103103

104104
export type MessageInfoMethod = (
105-
message: string | MessageInfoOptions,
105+
message: TNode | MessageInfoOptions,
106106
duration?: number,
107107
context?: AppContext,
108108
) => Promise<MessageInstance>;
109109

110110
export type MessageErrorMethod = (
111-
message: string | MessageInfoOptions,
111+
message: TNode | MessageInfoOptions,
112112
duration?: number,
113113
context?: AppContext,
114114
) => Promise<MessageInstance>;
115115

116116
export type MessageWarningMethod = (
117-
message: string | MessageInfoOptions,
117+
message: TNode | MessageInfoOptions,
118118
duration?: number,
119119
context?: AppContext,
120120
) => Promise<MessageInstance>;
121121

122122
export type MessageSuccessMethod = (
123-
message: string | MessageInfoOptions,
123+
message: TNode | MessageInfoOptions,
124124
duration?: number,
125125
context?: AppContext,
126126
) => Promise<MessageInstance>;
127127

128128
export type MessageLoadingMethod = (
129-
message: string | MessageInfoOptions,
129+
message: TNode | MessageInfoOptions,
130130
duration?: number,
131131
context?: AppContext,
132132
) => Promise<MessageInstance>;
133133

134134
export type MessageQuestionMethod = (
135-
message: string | MessageInfoOptions,
135+
message: TNode | MessageInfoOptions,
136136
duration?: number,
137137
context?: AppContext,
138138
) => Promise<MessageInstance>;

0 commit comments

Comments
 (0)