Message
Oracle from the top(always) of the browser.
If you want use message, you need to wrap the component where you call related methods inside n-message-provider and inject message.
For example:
<!-- App.vue -->
<n-message-provider>
<content />
</n-message-provider>
// content
export default {
inject: ['message'],
methods: {
warning () {
this.message.warning('...')
}
}
}
Demos
basic
icon
timing
closable
modify-content
manually-close
about-theme
API
MessageProvider Props
| Name |
Type |
Default |
Description |
| to |
string | HTMLElement |
'body' |
Container node of message container. |
MessageProvider Injection API
MessageProvider Injection Methods
| Name |
Type |
Description |
| error |
(content: string, option?: MessageOption) => MessageReactive |
|
| info |
(content: string, option?: MessageOption) => MessageReactive |
|
| loading |
(content: string, option?: MessageOption) => MessageReactive |
|
| success |
(content: string, option?: MessageOption) => MessageReactive |
|
| warning |
(content: string, option?: MessageOption) => MessageReactive |
|
MessageOption Properties
| Name |
Type |
Description |
| closable |
boolean |
|
| content |
string | (() => VNode | Array<VNode>) |
Message content. |
| icon |
() => VNode |
Message icon. |
| theme |
'light' | 'dark' | string | null |
|
| onAfterLeave |
Function |
Callback after message disappeared. |
| onLeave |
Function |
Callback when message start to disappear. |
MessageReactive Properties
| Name |
Type |
Description |
| closable |
boolean |
|
| content |
string | (() => VNode | Array<VNode>) |
Message content. |
| icon |
() => VNode |
Message icon. |
| theme |
'light' | 'dark' | string | null |
|
| type |
'info' | 'success' | 'warning' | 'error' | 'loading' |
|
| onAfterLeave |
Function |
Callback after message disappeared. |
| onLeave |
Function |
Callback when message start to disappear. |
MessageReactive Methods
| Name |
Type |
Description |
| destroy |
() |
|
