feat: update message
tangjinzhou
parent
4608fa546c
commit
01fab00cac
|
|
@ -1,6 +1,7 @@
|
|||
import { mount } from '@vue/test-utils'
|
||||
import { asyncExpect } from '@/tests/utils'
|
||||
import message from '..'
|
||||
import Icon from '../../icon'
|
||||
|
||||
describe('message', () => {
|
||||
beforeEach(() => {
|
||||
|
|
@ -126,7 +127,19 @@ describe('message', () => {
|
|||
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0)
|
||||
}, 0)
|
||||
})
|
||||
it('should allow custom icon', async () => {
|
||||
message.open({ content: 'Message', icon: (h) => <Icon type='smile-o' /> })
|
||||
await asyncExpect(() => {
|
||||
expect(document.querySelectorAll('.anticon-smile-o').length).toBe(1)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
it('should have no icon', async () => {
|
||||
message.open({ content: 'Message' })
|
||||
await asyncExpect(() => {
|
||||
expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0)
|
||||
}, 0)
|
||||
})
|
||||
// https://github.com/ant-design/ant-design/issues/8201
|
||||
it('should destroy messages correctly', async () => {
|
||||
// eslint-disable-next-line
|
||||
|
|
|
|||
|
|
@ -11,15 +11,10 @@ This components provides some static methods, with usage and arguments as follow
|
|||
|
||||
| Argument | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| content | content of the message | string\|vueNode \|function(h) | - |
|
||||
| content | content of the message | string\| VNode \|(h) => VNode | - |
|
||||
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |
|
||||
| onClose | Specify a function that will be called when the message is closed | Function | - |
|
||||
|
||||
Methods for global configuration and destruction are also provided:
|
||||
|
||||
- `message.config(options)`
|
||||
- `message.destroy()`
|
||||
|
||||
`afterClose` can be called in then-able interface:
|
||||
|
||||
- `message[level](content, [duration]).then(afterClose)`
|
||||
|
|
@ -28,7 +23,25 @@ Methods for global configuration and destruction are also provided:
|
|||
where `level` refers one static methods of `message`. The result of `then` method will be a Promise.
|
||||
|
||||
|
||||
### message.config
|
||||
- `message.open(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 | - |
|
||||
|
||||
### Global static methods
|
||||
|
||||
Methods for global configuration and destruction are also provided:
|
||||
|
||||
- `message.config(options)`
|
||||
- `message.destroy()`
|
||||
|
||||
#### message.config
|
||||
|
||||
```js
|
||||
message.config({
|
||||
|
|
|
|||
|
|
@ -33,30 +33,21 @@ function getMessageInstance (callback) {
|
|||
|
||||
// type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
|
||||
|
||||
function notice (
|
||||
content,
|
||||
duration,
|
||||
type,
|
||||
onClose,
|
||||
) {
|
||||
function notice (args) {
|
||||
const duration = args.duration !== undefined ? args.duration : defaultDuration
|
||||
const iconType = ({
|
||||
info: 'info-circle',
|
||||
success: 'check-circle',
|
||||
error: 'cross-circle',
|
||||
error: 'close-circle',
|
||||
warning: 'exclamation-circle',
|
||||
loading: 'loading',
|
||||
})[type]
|
||||
|
||||
if (typeof duration === 'function') {
|
||||
onClose = duration
|
||||
duration = defaultDuration
|
||||
}
|
||||
})[args.type]
|
||||
|
||||
const target = key++
|
||||
const closePromise = new Promise((resolve) => {
|
||||
const callback = () => {
|
||||
if (typeof onClose === 'function') {
|
||||
onClose()
|
||||
if (typeof args.onClose === 'function') {
|
||||
args.onClose()
|
||||
}
|
||||
return resolve(true)
|
||||
}
|
||||
|
|
@ -66,9 +57,11 @@ function notice (
|
|||
duration,
|
||||
style: {},
|
||||
content: (h) => (
|
||||
<div class={`${prefixCls}-custom-content ${prefixCls}-${type}`}>
|
||||
<Icon type={iconType} />
|
||||
<span>{typeof content === 'function' ? content(h) : content}</span>
|
||||
<div class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}>
|
||||
{args.icon
|
||||
? (typeof args.icon === 'function' ? args.icon(h) : args.icon)
|
||||
: (iconType ? <Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} /> : '')}
|
||||
<span>{typeof content === 'function' ? args.content(h) : args.content}</span>
|
||||
</div>
|
||||
),
|
||||
onClose: callback,
|
||||
|
|
@ -97,26 +90,8 @@ function notice (
|
|||
// transitionName?: string;
|
||||
// }
|
||||
|
||||
export default {
|
||||
info (content, duration, onClose) {
|
||||
return notice(content, duration, 'info', onClose)
|
||||
},
|
||||
success (content, duration, onClose) {
|
||||
return notice(content, duration, 'success', onClose)
|
||||
},
|
||||
error (content, duration, onClose) {
|
||||
return notice(content, duration, 'error', onClose)
|
||||
},
|
||||
// Departed usage, please use warning()
|
||||
warn (content, duration, onClose) {
|
||||
return notice(content, duration, 'warning', onClose)
|
||||
},
|
||||
warning (content, duration, onClose) {
|
||||
return notice(content, duration, 'warning', onClose)
|
||||
},
|
||||
loading (content, duration, onClose) {
|
||||
return notice(content, duration, 'loading', onClose)
|
||||
},
|
||||
const api = {
|
||||
open: notice,
|
||||
config (options) {
|
||||
if (options.top !== undefined) {
|
||||
defaultTop = options.top
|
||||
|
|
@ -146,4 +121,18 @@ export default {
|
|||
messageInstance = null
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
['success', 'info', 'warning', 'error', 'loading'].forEach((type) => {
|
||||
api[type] = (content, duration, onClose) => {
|
||||
if (typeof duration === 'function') {
|
||||
onClose = duration
|
||||
duration = undefined
|
||||
}
|
||||
return api.open({ content, duration: duration, type, onClose })
|
||||
}
|
||||
})
|
||||
|
||||
api.warn = api.warning
|
||||
|
||||
export default api
|
||||
|
|
|
|||
|
|
@ -11,15 +11,10 @@
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| content | 提示内容 | string\|vueNode \|function(h) | - |
|
||||
| content | 提示内容 | string\| VNode \|(h) => VNode | - |
|
||||
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
|
||||
| onClose | 关闭时触发的回调函数 | Function | - |
|
||||
|
||||
还提供了全局配置和全局销毁方法：
|
||||
|
||||
- `message.config(options)`
|
||||
- `message.destroy()`
|
||||
|
||||
组件同时提供 promise 接口
|
||||
|
||||
- `message[level](content, [duration]).then(afterClose)`
|
||||
|
|
@ -28,7 +23,23 @@
|
|||
其中`message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise 。
|
||||
|
||||
|
||||
### message.config
|
||||
- `message.open(config)`
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| content | 提示内容 | string\| VNode \|(h) => VNode | - |
|
||||
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
|
||||
| onClose | 关闭时触发的回调函数 | Function | - |
|
||||
| icon | 自定义图标 | string\| VNode \|(h) => VNode | - |
|
||||
|
||||
### 全局方法
|
||||
|
||||
还提供了全局配置和全局销毁方法：
|
||||
|
||||
- `message.config(options)`
|
||||
- `message.destroy()`
|
||||
|
||||
#### message.config
|
||||
|
||||
```js
|
||||
message.config({
|
||||
|
|
|
|||
Loading…
Reference in New Issue