feat(message): message增加全局配置默认值能力

message增加全局配置默认值能力

fix #663

examples/message/demos/plugin.vue

@@ -8,41 +8,69 @@
     -->
 
     <p>插件调用</p>
-    <br>
-    <div class='t-demo-message-duration'>
+    <br />
+    <div class="t-demo-message-duration">
       <t-button theme="primary" variant="outline" @click="$message.info('用户表示普通操作信息提示')">消息</t-button>
-      <t-button theme="success" variant="outline" @click="$message.success({ content: '用户表示操作顺利达成', duration: 2000 })">
+      <t-button
+        theme="success"
+        variant="outline"
+        @click="$message.success({ content: '用户表示操作顺利达成', duration: 2000 })"
+      >
         成功
       </t-button>
-      <t-button theme="warning" variant="outline" @click="$message('warning', '用户表示操作引起一定后果')">警示</t-button>
+      <t-button theme="warning" variant="outline" @click="$message('warning', '用户表示操作引起一定后果')">
+        警示
+      </t-button>
       <t-button
         theme="danger"
         variant="outline"
         @click="$message('error', { content: '用户表示操作引起严重的后果', duration: 4000 })"
       >
         失败
       </t-button>
-      <t-button theme="primary" variant="outline" @click="$message.question('用于帮助用户操作的信息提示', 5000)">询问</t-button>
+      <t-button theme="primary" variant="outline" @click="$message.question('用于帮助用户操作的信息提示', 5000)">
+        询问
+      </t-button>
       <!-- 0 表示永远不自动消失 -->
-      <t-button theme="primary" variant="outline" @click="$message.loading('用于表示操作正在生效的过程中', 0)">加载中</t-button>
+      <t-button theme="primary" variant="outline" @click="$message.loading('用于表示操作正在生效的过程中', 0)">
+        加载中
+      </t-button>
       <t-button theme="default" variant="outline" @click="$message.closeAll()">关闭所有</t-button>
+      <t-button theme="default" variant="outline" @click="$message.config({ placement: 'left' })">
+        设置默认位置
+      </t-button>
     </div>
-    <br><br>
+    <br /><br />
 
     <p>函数式调用</p>
-    <br>
-    <div class='t-demo-message-theme'>
-      <t-button theme="primary" variant="outline" @click="MessagePlugin.info('用户表示普通操作信息提示')">消息</t-button>
-      <t-button theme="success" variant="outline" @click="MessagePlugin('success', '用户表示操作顺利达成')">成功</t-button>
-      <t-button theme="warning" variant="outline" @click="MessagePlugin('warning', { content: '用户表示操作引起一定后果' })">
+    <br />
+    <div class="t-demo-message-theme">
+      <t-button theme="primary" variant="outline" @click="MessagePlugin.info('用户表示普通操作信息提示')">
+        消息
+      </t-button>
+      <t-button theme="success" variant="outline" @click="MessagePlugin('success', '用户表示操作顺利达成')">
+        成功
+      </t-button>
+      <t-button
+        theme="warning"
+        variant="outline"
+        @click="MessagePlugin('warning', { content: '用户表示操作引起一定后果' })"
+      >
         警示
       </t-button>
       <t-button theme="danger" variant="outline" @click="MessagePlugin.error({ content: content })">失败</t-button>
-      <t-button theme="primary" variant="outline" @click="MessagePlugin.question('用于帮助用户操作的信息提示')">询问</t-button>
-      <t-button theme="primary" variant="outline" @click="MessagePlugin.loading('用于表示操作正在生效的过程中')">加载中</t-button>
+      <t-button theme="primary" variant="outline" @click="MessagePlugin.question('用于帮助用户操作的信息提示')">
+        询问
+      </t-button>
+      <t-button theme="primary" variant="outline" @click="MessagePlugin.loading('用于表示操作正在生效的过程中')">
+        加载中
+      </t-button>
       <t-button theme="default" variant="outline" @click="MessagePlugin.closeAll()">关闭所有</t-button>
+      <t-button theme="default" variant="outline" @click="$message.config({ placement: 'right' })">
+        设置默认位置
+      </t-button>
     </div>
-    <br><br>
+    <br /><br />
   </div>
 </template>
 
@@ -57,17 +85,25 @@ export default {
   },
   methods: {
     closeBtn(close) {
-      return <b class='t-message__close' onClick={close}>x</b>;
+      return (
+        <b class="t-message__close" onClick={close}>
+          x
+        </b>
+      );
     },
     content() {
-      return <div>操作有误，<a href='#'>前往查看</a></div>;
+      return (
+        <div>
+          操作有误，<a href="#">前往查看</a>
+        </div>
+      );
     },
   },
 };
 </script>
 
 <style scoped>
-  .t-button + .t-button {
-    margin-left: 16px;
-  }
+.t-button + .t-button {
+  margin-left: 16px;
+}
 </style>

examples/message/message.md

@@ -30,12 +30,22 @@
 
 {{ plugin }}
 
+### 全局方法
+还提供了全局配置方法
++  `this.$message.config(placement, attach, offset, zIndex)`
++  `MessagePlugin.config(placement, attach, offset, zIndex)`
+
+```javascript
+this.$message.config('top', 'body', [10, 20], 9999);
+MessagePlugin.config('top', 'body', [10, 20], 9999);
+```
+
 ## API
 ### Message Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 content | String / Slot / Function | - | 用于自定义消息弹出内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | 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/blob/develop/src/common.ts) | N
@@ -48,7 +58,7 @@ onDurationEnd | Function |  | TS 类型：`() => void`<br/>计时结束后触发
 名称 | 参数 | 描述
 -- | -- | --
 close-btn-click | `(context: { e: MouseEvent })` | 当关闭按钮存在时，用户点击关闭按钮触发
-duration-end | - | 计时结束后触发
+duration-end | \- | 计时结束后触发
 
 ### MessageOptions
 
@@ -58,7 +68,7 @@ attach | String / Function | 'body' | 指定弹框挂载的父节点。数据类
 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/tree/develop/src/message/type.ts) | N
 zIndex | Number | 5000 | 消息层级 | N
-MessageProps | - | - | 继承 `MessageProps` 中的全部 API | N
+`MessageProps` | \- | - | 继承 `MessageProps` 中的全部 API | N
 
 ### MessagePlugin
 
@@ -70,8 +80,6 @@ theme | String | - | 必需。消息类型。TS 类型：`MessageThemeList`
 message | String / Object | - | 必需。消息内容。TS 类型：`string | MessageOptions`
 duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
 
-插件返回值：`Promise<MessageInstance>【interface MessageInstance { close: () => void }】`
-
 ### MessagePlugin.info
 
 同时也支持 `this.$message.info`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
@@ -81,8 +89,6 @@ duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表
 message | String / Object | - | 必需。消息内容。TS 类型：`string | MessageInfoOptions` `type MessageInfoOptions = Omit<MessageOptions, 'theme'>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/message/type.ts)
 duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
 
-插件返回值：`Promise<MessageInstance>`
-
 ### MessagePlugin.error
 
 同时也支持 `this.$message.error`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
@@ -92,8 +98,6 @@ duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表
 message | String / Object | - | 必需。消息内容。TS 类型：`string | MessageInfoOptions`
 duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
 
-插件返回值：`Promise<MessageInstance>`
-
 ### MessagePlugin.warning
 
 同时也支持 `this.$message.warning`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
@@ -103,8 +107,6 @@ duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表
 message | String / Object | - | 必需。消息内容。TS 类型：`string | MessageInfoOptions`
 duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
 
-插件返回值：`Promise<MessageInstance>`
-
 ### MessagePlugin.success
 
 同时也支持 `this.$message.success`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
@@ -114,8 +116,6 @@ duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表
 message | String / Object | - | 必需。消息内容。TS 类型：`string | MessageInfoOptions`
 duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
 
-插件返回值：`Promise<MessageInstance>`
-
 ### MessagePlugin.loading
 
 同时也支持 `this.$message.loading`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
@@ -125,8 +125,6 @@ duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表
 message | String / Object | - | 必需。消息提醒内容。TS 类型：`string | MessageInfoOptions`
 duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
 
-插件返回值：`Promise<MessageInstance>`
-
 ### MessagePlugin.question
 
 同时也支持 `this.$message.question`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
@@ -136,8 +134,6 @@ duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表
 message | String / Object | - | 必需。消息内容。TS 类型：`string | MessageInfoOptions`
 duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示
 
-插件返回值：`Promise<MessageInstance>`
-
 ### MessagePlugin.close
 
 同时也支持 `this.$message.close`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
@@ -152,4 +148,15 @@ options | Object | - | 必需。该插件参数为 $Message.info() 等插件执
 
 参数名称 | 参数类型 | 参数默认值 | 参数说明
 -- | -- | -- | --
--- | - | - | --。TS 类型：`--`
+\- | \- | - | \-
+
+### MessagePlugin.config
+
+同时也支持 `this.$message.config`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
+
+参数名称 | 参数类型 | 参数默认值 | 参数说明
+-- | -- | -- | --
+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/tree/develop/src/message/type.ts)
+attach | String / Function | 'body' | 指定弹框挂载的父节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
+offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string | number>`
+zIndex | Number | 5000 | 消息层级

src/message/messageList.tsx

@@ -5,7 +5,7 @@ import { prefix } from '../config';
 import { MessageOptions } from './type';
 import { Styles } from '../common';
 
-export const DEFAULT_Z_INDEX = 6000;
+export const DEFAULT_Z_INDEX = 5000;
 
 const getUniqueId = (() => {
   let id = 0;

src/message/plugin.tsx

@@ -39,18 +39,23 @@ import {
   MessageQuestionMethod,
   MessageCloseMethod,
   MessageCloseAllMethod,
+  MessageConfigMethod,
 } from './type';
 import { AttachNodeReturnValue } from '../common';
 
 // 存储不同 attach 和 不同 placement 消息列表实例
 const instanceMap: Map<AttachNodeReturnValue, object> = new Map();
 
+const defaultMessageOptions: MessageOptions = {
+  duration: 3000,
+  attach: 'body',
+  zIndex: DEFAULT_Z_INDEX,
+  placement: 'top',
+};
+
 function handleParams(params: MessageOptions): MessageOptions {
   const options: MessageOptions = {
-    duration: 3000,
-    attach: 'body',
-    zIndex: DEFAULT_Z_INDEX,
-    placement: 'top',
+    ...defaultMessageOptions,
     ...params,
   };
   options.content = params.content;
@@ -99,6 +104,13 @@ const showThemeMessage: MessageMethod = (theme, params, duration) => {
   return MessageFunction(options);
 };
 
+const setMessageConfig: MessageConfigMethod = (placement, attach, offset, zIndex) => {
+  attach && (defaultMessageOptions.attach = attach);
+  offset && (defaultMessageOptions.offset = offset);
+  placement && (defaultMessageOptions.placement = placement);
+  zIndex && (defaultMessageOptions.zIndex = zIndex);
+};
+
 interface ExtraApi {
   info: MessageInfoMethod;
   success: MessageSuccessMethod;
@@ -108,6 +120,7 @@ interface ExtraApi {
   loading: MessageLoadingMethod;
   close: MessageCloseMethod;
   closeAll: MessageCloseAllMethod;
+  config: MessageConfigMethod;
 }
 
 const extraApi: ExtraApi = {
@@ -130,6 +143,7 @@ const extraApi: ExtraApi = {
       });
     }
   },
+  config: setMessageConfig,
 };
 
 export type MessagePluginType = Vue.PluginObject<undefined> & ExtraApi & MessageMethod;

src/message/props.ts

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-08 20:28:17
  * */
 
 import { TdMessageProps } from './type';
@@ -12,7 +11,7 @@ export default {
   /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮 */
   closeBtn: {
     type: [String, Boolean, Function] as PropType<TdMessageProps['closeBtn']>,
-    default: undefined,
+    default: true,
   },
   /** 用于自定义消息弹出内容 */
   content: {
@@ -33,6 +32,7 @@ export default {
     type: String as PropType<TdMessageProps['theme']>,
     default: 'info' as TdMessageProps['theme'],
     validator(val: TdMessageProps['theme']): boolean {
+      if (!val) return true;
       return ['info', 'success', 'warning', 'error', 'question', 'loading'].includes(val);
     },
   },