diff --git a/build/config.js b/build/config.js index fa5c3a283..7498a5ca0 100644 --- a/build/config.js +++ b/build/config.js @@ -1,5 +1,5 @@ module.exports = { dev: { - componentName: 'menu', // dev components + componentName: 'message', // dev components }, }; diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap index c505ce7eb..1fd8e506e 100644 --- a/components/message/__tests__/__snapshots__/demo.test.js.snap +++ b/components/message/__tests__/__snapshots__/demo.test.js.snap @@ -9,3 +9,5 @@ exports[`renders ./components/message/demo/loading.md correctly 1`] = ` `; exports[`renders ./components/message/demo/thenable.md correctly 1`] = ``; + +exports[`renders ./components/message/demo/update.md correctly 1`] = ``; diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js index 08efefe8e..55a5aa966 100644 --- a/components/message/__tests__/index.test.js +++ b/components/message/__tests__/index.test.js @@ -97,13 +97,14 @@ describe('message', () => { }); }); - it('should be called like promise', () => { + it('should be called like promise', done => { const defaultDuration = 3; const now = Date.now(); message.info('whatever').then(() => { // calculate the approximately duration value const aboutDuration = parseInt((Date.now() - now) / 1000, 10); expect(aboutDuration).toBe(defaultDuration); + done(); }); }); diff --git a/components/message/demo/index.vue b/components/message/demo/index.vue index 82e973a13..7bc9a1856 100644 --- a/components/message/demo/index.vue +++ b/components/message/demo/index.vue @@ -4,6 +4,7 @@ import Info from './info'; import Loading from './loading'; import Other from './other'; import Thenable from './thenable'; +import Update from './update'; import CN from '../index.zh-CN.md'; import US from '../index.en-US.md'; const md = { @@ -36,6 +37,7 @@ export default { + diff --git a/components/message/demo/info.md b/components/message/demo/info.md index bd726f77a..b3148cfc6 100644 --- a/components/message/demo/info.md +++ b/components/message/demo/info.md @@ -5,7 +5,7 @@ #### Normal prompt -Normal messages as feedbacks. +Normal message for information. ```tpl diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md index 103a1ad3a..316015b8a 100644 --- a/components/message/demo/loading.md +++ b/components/message/demo/loading.md @@ -4,7 +4,7 @@ -#### Message of loading +#### Message with loading indicator Display a global loading indicator, which is dismissed by itself asynchronously. diff --git a/components/message/demo/other.md b/components/message/demo/other.md index da8834ea5..5571937e5 100644 --- a/components/message/demo/other.md +++ b/components/message/demo/other.md @@ -20,13 +20,13 @@ Messages of success, error and warning types. export default { methods: { success() { - this.$message.success('This is a message of success'); + this.$message.success('This is a success message'); }, error() { - this.$message.error('This is a message of error'); + this.$message.error('This is an error message'); }, warning() { - this.$message.warning('This is message of warning'); + this.$message.warning('This is a warning message'); }, }, }; diff --git a/components/message/demo/update.md b/components/message/demo/update.md new file mode 100644 index 000000000..333e9ecdd --- /dev/null +++ b/components/message/demo/update.md @@ -0,0 +1,28 @@ + +#### 更新消息内容 +可以通过唯一的 `key` 来更新内容。 + + + +#### Update Message Content +Update message content with unique `key`. + + +```tpl + + +``` diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index 98193fd65..d1390e6b2 100644 --- a/components/message/index.en-US.md +++ b/components/message/index.en-US.md @@ -23,15 +23,22 @@ This components provides some static methods, with usage and arguments as follow where `level` refers one static methods of `message`. The result of `then` method will be a Promise. - `message.open(config)` +- `message.success(config)` +- `message.error(config)` +- `message.info(config)` +- `message.warning(config)` +- `message.warn(config)` // alias of warning +- `message.loading(config)` The properties of config are as follows: -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| content | content of the message | string\| VNode \|(h) => VNode | - | -| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 | -| onClose | Specify a function that will be called when the message is closed | function | - | -| icon | Customized Icon | string\| VNode \|(h) => VNode | - | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| content | content of the message | string\| VNode \|(h) => VNode | - | | +| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 | | +| onClose | Specify a function that will be called when the message is closed | function | - | | +| icon | Customized Icon | string\| VNode \|(h) => VNode | - | | +| key | The unique identifier of the Message | string\|number | - | 1.5.0 | ### Global static methods diff --git a/components/message/index.js b/components/message/index.js index 0e6816e6e..6f0f56182 100644 --- a/components/message/index.js +++ b/components/message/index.js @@ -46,7 +46,7 @@ function notice(args) { loading: 'loading', }[args.type]; - const target = key++; + const target = args.key || key++; const closePromise = new Promise(resolve => { const callback = () => { if (typeof args.onClose === 'function') { @@ -59,24 +59,24 @@ function notice(args) { key: target, duration, style: {}, - content: h => ( -
- {args.icon ? ( - typeof args.icon === 'function' ? ( - args.icon(h) - ) : ( - args.icon - ) - ) : iconType ? ( - - ) : ( - '' - )} - {typeof args.content === 'function' ? args.content(h) : args.content} -
- ), + content: h => { + const iconNode = ( + + ); + const switchIconNode = iconType ? iconNode : ''; + return ( +
+ {args.icon + ? typeof args.icon === 'function' + ? args.icon(h) + : args.icon + : switchIconNode} + {typeof args.content === 'function' ? args.content(h) : args.content} +
+ ); + }, onClose: callback, }); }); @@ -95,6 +95,10 @@ function notice(args) { // type ConfigDuration = number | (() => void); // export type ConfigOnClose = () => void; +function isArgsProps(content) { + return Object.prototype.toString.call(content) === '[object Object]' && !!content.content; +} + // export interface ConfigOptions { // top?: number; // duration?: number; @@ -138,11 +142,14 @@ const api = { ['success', 'info', 'warning', 'error', 'loading'].forEach(type => { api[type] = (content, duration, onClose) => { + if (isArgsProps(content)) { + return api.open({ ...content, type }); + } if (typeof duration === 'function') { onClose = duration; duration = undefined; } - return api.open({ content, duration: duration, type, onClose }); + return api.open({ content, duration, type, onClose }); }; }); diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index fe2ae2a7e..773970896 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -22,14 +22,23 @@ 其中`message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise 。 -- `message.open(config)` +也可以对象的形式传递参数: -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| content | 提示内容 | string\| VNode \|(h) => VNode | - | -| duration | 自动关闭的延时,单位秒。设为 0 时不自动关闭。 | number | 3 | -| onClose | 关闭时触发的回调函数 | Function | - | -| icon | 自定义图标 | string\| VNode \|(h) => VNode | - | +- `message.open(config)` +- `message.success(config)` +- `message.error(config)` +- `message.info(config)` +- `message.warning(config)` +- `message.warn(config)` // alias of warning +- `message.loading(config)` + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| content | 提示内容 | string\| VNode \|(h) => VNode | - | | +| duration | 自动关闭的延时,单位秒。设为 0 时不自动关闭。 | number | 3 | | +| onClose | 关闭时触发的回调函数 | Function | - | | +| icon | 自定义图标 | string\| VNode \|(h) => VNode | - | | +| key | 当前提示的唯一标志 | string\|number | - | 1.5.0 | ### 全局方法 diff --git a/types/message.d.ts b/types/message.d.ts index 44556a4b2..ef82d6950 100644 --- a/types/message.d.ts +++ b/types/message.d.ts @@ -33,6 +33,7 @@ export interface MessageOptions { * @type Function */ onClose?: () => void; + key?: string | number; } export interface MessageConfigOptions {