mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
docs(notification): vue3
This commit is contained in:
parent
c7fb6eb2ec
commit
e8363f9b64
@ -1,17 +1,20 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-button @click="notify1">
|
||||
<n-button @click="handleClick1">
|
||||
Wouldn't it be Nice
|
||||
</n-button>
|
||||
<n-button @click="notify2">
|
||||
<n-button @click="handleClick2">
|
||||
Satisfaction
|
||||
</n-button>
|
||||
```
|
||||
```js
|
||||
import { h, resolveComponent } from 'vue'
|
||||
|
||||
export default {
|
||||
inject: ['notification', 'message'],
|
||||
methods: {
|
||||
notify1 () {
|
||||
this.$NNotification.open({
|
||||
handleClick1 () {
|
||||
this.notification.create({
|
||||
title: `Wouldn't it be Nice`,
|
||||
description: 'From the Beach Boys',
|
||||
content: `Wouldn't it be nice if we were older
|
||||
@ -25,47 +28,43 @@ In the morning when the day is new
|
||||
And after having spent the day together
|
||||
Hold each other close the whole night through`,
|
||||
meta: '2019-5-27 15:11',
|
||||
avatar: h =>
|
||||
h('n-avatar', {
|
||||
props: {
|
||||
size: 'small',
|
||||
round: true,
|
||||
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
|
||||
}
|
||||
avatar: () =>
|
||||
h(resolveComponent('n-avatar'), {
|
||||
size: 'small',
|
||||
round: true,
|
||||
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
|
||||
}),
|
||||
onAfterHide: () => {
|
||||
this.$NMessage.success(`Wouldn't it be Nice`)
|
||||
onAfterLeave: () => {
|
||||
this.message.success(`Wouldn't it be Nice`)
|
||||
},
|
||||
})
|
||||
},
|
||||
notify2 () {
|
||||
handleClick2 () {
|
||||
let markAsRead = false
|
||||
const notification = this.$NNotification.open({
|
||||
const notification = this.notification.create({
|
||||
title: 'Satisfaction',
|
||||
content: `I cant get no satisfaction
|
||||
I cant get no satisfaction
|
||||
Cause I try and I try and I try and I try
|
||||
I cant get no, I cant get no`,
|
||||
meta: '2019-5-27 15:11',
|
||||
action: h => h(
|
||||
'n-button',
|
||||
action: () => h(
|
||||
resolveComponent('n-button'),
|
||||
{
|
||||
props: {
|
||||
text: true,
|
||||
type: 'primary'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
markAsRead = true
|
||||
notification.hide()
|
||||
}
|
||||
text: true,
|
||||
type: 'primary',
|
||||
onClick: () => {
|
||||
markAsRead = true
|
||||
notification.destroy()
|
||||
}
|
||||
},
|
||||
['Mark as Read']
|
||||
{
|
||||
default: () => 'Mark as Read'
|
||||
}
|
||||
),
|
||||
onClose: () => {
|
||||
if (!markAsRead) {
|
||||
this.$NMessage.warning('Please mark as read')
|
||||
this.message.warning('Please mark as read')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
@ -1,23 +1,28 @@
|
||||
# Change Content Dynamically
|
||||
You can change any parts of notifications existed.
|
||||
```html
|
||||
<n-button @click="open">
|
||||
Open it
|
||||
</n-button>
|
||||
<n-button @click="change" :disabled="!notification">
|
||||
Change it
|
||||
</n-button>
|
||||
<n-space>
|
||||
<n-button @click="open">
|
||||
Open it
|
||||
</n-button>
|
||||
<n-button @click="change" :disabled="!n">
|
||||
Change it
|
||||
</n-button>
|
||||
</n-space>
|
||||
```
|
||||
```js
|
||||
import { h, resolveComponent } from 'vue'
|
||||
|
||||
export default {
|
||||
inject: ['notification'],
|
||||
data () {
|
||||
return {
|
||||
notification: null
|
||||
n: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
this.notification = this.$NNotification.open({
|
||||
this.n = this.notification.create({
|
||||
title: `Wouldn't it be Nice`,
|
||||
description: 'From the Beach Boys',
|
||||
content: `Wouldn't it be nice if we were older
|
||||
@ -31,36 +36,25 @@ In the morning when the day is new
|
||||
And after having spent the day together
|
||||
Hold each other close the whole night through`,
|
||||
meta: '2019-5-27 15:11',
|
||||
avatar: h =>
|
||||
h('n-avatar', {
|
||||
props: {
|
||||
size: 'small',
|
||||
round: true,
|
||||
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
|
||||
}
|
||||
avatar: () =>
|
||||
h(resolveComponent('n-avatar'), {
|
||||
size: 'small',
|
||||
round: true,
|
||||
src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
|
||||
}),
|
||||
onClose: () => {
|
||||
this.notification = null
|
||||
this.n = null
|
||||
}
|
||||
})
|
||||
},
|
||||
change () {
|
||||
if (this.notification) {
|
||||
this.notification.content = h => h('img', {
|
||||
attrs: {
|
||||
src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
|
||||
},
|
||||
style: {
|
||||
width: '100%'
|
||||
}
|
||||
if (this.n) {
|
||||
this.n.content = () => h('img', {
|
||||
src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
|
||||
style: 'width: 100%;'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
@ -1,28 +1,30 @@
|
||||
# Unclosable
|
||||
You can make it unclosable.
|
||||
```html
|
||||
<n-button @click="notify('info')">
|
||||
<n-button @click="handleClick">
|
||||
Unclosable
|
||||
</n-button>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
inject: ['notification'],
|
||||
methods: {
|
||||
notify (type) {
|
||||
this.$NNotification.open({
|
||||
title: `Close Me if You Can`,
|
||||
handleClick () {
|
||||
const notification = this.notification
|
||||
notification.create({
|
||||
title: 'Close Me if You Can',
|
||||
duration: 2000,
|
||||
closable: false,
|
||||
onAfterHide: () => {
|
||||
this.$NNotification.open({
|
||||
title: `Ha Ha Ha Ha!`,
|
||||
onAfterLeave: () => {
|
||||
notification.create({
|
||||
title: 'Ha Ha Ha Ha!',
|
||||
duration: 2000,
|
||||
closable: false,
|
||||
onAfterHide: () => {
|
||||
this.$NNotification.open({
|
||||
onAfterLeave: () => {
|
||||
notification.create({
|
||||
title: `No, You Can't`,
|
||||
duration: 2000,
|
||||
closable: false,
|
||||
closable: false
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -32,8 +34,3 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
@ -1,21 +1,23 @@
|
||||
# Duration
|
||||
Auto close.
|
||||
```html
|
||||
<n-button @click="notify('info')">
|
||||
<n-button @click="handleClick">
|
||||
Duration: 10000
|
||||
</n-button>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
inject: ['notification'],
|
||||
methods: {
|
||||
notify (type) {
|
||||
handleClick () {
|
||||
let count = 10
|
||||
const notification = this.$NNotification.open({
|
||||
title: `What is Pingshan Road + rain ?`,
|
||||
const notification = this.notification.create({
|
||||
title: 'What is Pingshan Road + rain ?',
|
||||
content: `You have ${count} seconds to answer the question.`,
|
||||
duration: 10000,
|
||||
closable: false,
|
||||
onAfterShow: () => {
|
||||
onAfterEnter: () => {
|
||||
const minusCount = () => {
|
||||
count--
|
||||
notification.content = `You have ${count} seconds to answer the question.`
|
||||
@ -25,9 +27,9 @@ export default {
|
||||
}
|
||||
window.setTimeout(minusCount, 1000)
|
||||
},
|
||||
onAfterHide: () => {
|
||||
this.$NNotification.open({
|
||||
title: `The Answer is Pingshan River!`,
|
||||
onAfterLeave: () => {
|
||||
this.notification.create({
|
||||
title: 'The Answer is Pingshan River!',
|
||||
content: 'Oops, that is not even an anti-humor.',
|
||||
duration: 10000
|
||||
})
|
||||
@ -37,8 +39,3 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
@ -1,7 +1,36 @@
|
||||
# Notification
|
||||
If something is to be telled to somebody.
|
||||
|
||||
UI has designed it long long ago. However, you know, notification component is always with low piority so I can make a lot of useless animations on it.
|
||||
Notification component is always with low piority so I can make a lot of useless animations on it.
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-alert title="Prerequisite" type="warning">
|
||||
If you want use notification, you need to wrap the component where you call related methods inside <n-text code>n-nofitication-provider</n-text> and inject <n-text code>nofitication</n-text>.
|
||||
</n-alert>
|
||||
For example:
|
||||
|
||||
```html
|
||||
<!-- App.vue -->
|
||||
<n-nofitication-provider>
|
||||
<content />
|
||||
</n-nofitication-provider>
|
||||
```
|
||||
|
||||
```js
|
||||
// content
|
||||
export default {
|
||||
inject: ['nofitication'],
|
||||
methods: {
|
||||
notify () {
|
||||
this.nofitication.create(
|
||||
// ...
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
</n-space>
|
||||
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
@ -11,58 +40,60 @@ scrollable
|
||||
closable
|
||||
duration
|
||||
```
|
||||
## API
|
||||
### $NNotification Methods
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|theme|`'light' \| 'dark'`|||
|
||||
|open|`(option: NotificationOption, type: string = 'default') => NotificationEnvironment`|`type` can be `'default'`, `'warning'`, `'info'`, `'success'` and `'error'`|
|
||||
|success|`(option: NofiticationOption) => NotificationEnvironment`||
|
||||
|info|`(option: NofiticationOption) => NotificationEnvironment`||
|
||||
|warning|`(option: NofiticationOption) => NotificationEnvironment`||
|
||||
|error|`(option: NofiticationOption) => NotificationEnvironment`||
|
||||
|
||||
### $Notification Properties
|
||||
## API
|
||||
### NotificationProvider Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|scrollable|`boolean`|`false`||
|
||||
|scrollable|`boolean`|`true`||
|
||||
|to|`string \| HTMLElement`|`'body'`||
|
||||
|
||||
### `notification` Injection Methods
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|create|`(option: NotificationOption) => NotificationReactive`||
|
||||
|error|`(option: NotificationOption) => NotificationReactive`||
|
||||
|info|`(option: NotificationOption) => NotificationReactive`||
|
||||
|success|`(option: NotificationOption) => NotificationReactive`||
|
||||
|warning|`(option: NotificationOption) => NotificationReactive`||
|
||||
|
||||
### NotificationOption Properties
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark'`|`null`|If set it will be used as the theme of notification. (It works nearly the same as <n-a to="n-message#about-theme">$NMessage's theme</n-a>, and in most cases you don't need to set the property.)|
|
||||
|avatar|`() => VNode \| Array<VNode>`|`null`|Can be a render function|
|
||||
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function|
|
||||
|description|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function|
|
||||
|content|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function|
|
||||
|meta|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function|
|
||||
|action|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function|
|
||||
|action|`string \| (() => VNode \| Array<VNode>)`|`undefined`|Can be a render function.|
|
||||
|avatar|`() => VNode \| Array<VNode>`|`undefined`|Can be a render function.|
|
||||
|closable|`boolean`|`true`||
|
||||
|onClose|`() => boolean \| Promise<boolean> \| any`|`() => {}`|The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing.|
|
||||
|onAfterHide|`Function`|`null`||
|
||||
|onAfterShow|`Function`|`null`||
|
||||
|duration|`number`|`null`|If not set, it won't automatically close. Unit is millisecond.|
|
||||
|content|`string \| (() => VNode \| Array<VNode>)`|`undefined`|Can be a render function.|
|
||||
|description|`string \| (() => VNode \| Array<VNode>)`|`undefined`|Can be a render function.|
|
||||
|duration|`number`|`undefined`|If not set, it won't automatically close. Unit is millisecond.|
|
||||
|meta|`string \| (() => VNode \| Array<VNode>)`|`undefined`|Can be a render function.|
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|title|`string \| (() => VNode \| Array<VNode>)`|`undefined`|Can be a render function.|
|
||||
|onAfterEnter|`Function`|`undefined`||
|
||||
|onAfterLeave|`Function`|`undefined`||
|
||||
|onClose|`() => boolean \| Promise<boolean>`|`undefined`|The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing.|
|
||||
|onLeave|`Function`|||
|
||||
|
||||
### NotificationEnvironment API
|
||||
#### NotificationEnvironment Properties
|
||||
Properties of NofiticationEnvironment Instance can be dynamically set.
|
||||
### NotificationReactive API
|
||||
#### NotificationReactive Properties
|
||||
Properties of NotificationReactive can be dynamically changed.
|
||||
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|theme|`'light' \| 'dark'`|If set it will be used as the theme of notification. (It works nearly the same as <n-a to="n-message#about-theme">$NMessage's theme</n-a>, and in most cases you don't need to set the property.)|
|
||||
|avatar|`() => VNode \| Array<VNode>`|Can be a render function|
|
||||
|title|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|
|
||||
|description|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|
|
||||
|content|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|
|
||||
|meta|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|
|
||||
|action|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|
|
||||
|action|`string \| (() => VNode \| Array<VNode>)`|Can be a render function.|
|
||||
|avatar|`() => VNode \| Array<VNode>`|Can be a render function.|
|
||||
|closable|`boolean`||
|
||||
|onClose|`(next: function) => any`|Callback when close button is clicked. Only if next is called notification will close|
|
||||
|onHide|`Function`||
|
||||
|onAfterHide|`Function`||
|
||||
|onAfterShow|`Function`||
|
||||
|content|`string \| (() => VNode \| Array<VNode>)`|Can be a render function.|
|
||||
|description|`string \| (() => VNode \| Array<VNode>)`|Can be a render function.|
|
||||
|meta|`string \| (() => VNode \| Array<VNode>)`|Can be a render function.|
|
||||
|theme|`'light' \| 'dark' \| null \| string`||
|
||||
|title|`string \| (() => VNode \| Array<VNode>)`|Can be a render function.|
|
||||
|onAfterEnter|`Function`||
|
||||
|onAfterLeave|`Function`||
|
||||
|onClose|`() => boolean \| Promise<boolean>`|The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing.|
|
||||
|onLeave|`Function`||
|
||||
|
||||
#### NotificationEnvironment Methods
|
||||
#### NotificationReactive Methods
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|hide|`()`||
|
||||
|destroy|`()`|Destroy the notification|
|
||||
|
@ -1,22 +1,28 @@
|
||||
# Scrollable
|
||||
If there are too many notifications, you can make them scrollable by setting `$NNotification.scrollable = true`. However, in that case they will overlay a bit more area than them look, which will block some mouse events near notifications. If you don't want the feature, simply not set it.
|
||||
If there are too many notifications, notifications container can be scrollable. However, in that case they will overlay a bit more area than them look, which will block some mouse events near notifications. If you don't want the feature, you can set `<n-notification-provider :scrollable="false" />` to make it unscrollable.
|
||||
|
||||
Change the property will cause all existing notifications to be cleaned, so please make sure you change this property at proper time.
|
||||
```html
|
||||
<n-button @click="handleClick(true)">Scrollable(Open some notifications after click)</n-button>
|
||||
<n-button @click="handleClick(false)">Unscrollable</n-button>
|
||||
<n-button @click="handleClick">See how it scrolls</n-button>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
inject: ['notification'],
|
||||
methods: {
|
||||
handleClick (scrollable) {
|
||||
this.$NNotification.scrollable = scrollable
|
||||
Array.apply(null, { length: 5 }).forEach(
|
||||
notification => this.notification.create({
|
||||
title: 'Many Notifications',
|
||||
content: `Try to scroll
|
||||
Try to scroll
|
||||
Try to scroll
|
||||
Try to scroll
|
||||
Try to scroll
|
||||
Try to scroll
|
||||
Try to scroll`
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
@ -15,9 +15,10 @@
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
inject: ['notification'],
|
||||
methods: {
|
||||
notify (type) {
|
||||
this.$NNotification[type]({
|
||||
this.notification[type]({
|
||||
content: `What to say?`,
|
||||
meta: 'I don\'t know'
|
||||
})
|
||||
@ -29,4 +30,4 @@ export default {
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
@ -34,8 +34,3 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
@ -38,8 +38,3 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
@ -1,7 +1,36 @@
|
||||
# 通知 Notification
|
||||
通知某人。
|
||||
|
||||
UI 同志很早就设计完了。但是,你也知道,像是通知组件这种东西优先级不那么高,所以我可以弄一堆没什么用的动画上去。
|
||||
像是通知组件这种东西优先级不那么高,所以我可以弄一堆没什么用的动画上去。
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-alert title="使用前提" type="warning">
|
||||
如果你想使用通知,你需要把调用其方法的组件放在 <n-text code>n-nofitication-provider</n-text> 内部并且注入 <n-text code>nofitication</n-text>。
|
||||
</n-alert>
|
||||
例如:
|
||||
|
||||
```html
|
||||
<!-- App.vue -->
|
||||
<n-nofitication-provider>
|
||||
<content />
|
||||
</n-nofitication-provider>
|
||||
```
|
||||
|
||||
```js
|
||||
// content
|
||||
export default {
|
||||
inject: ['nofitication'],
|
||||
methods: {
|
||||
nofity () {
|
||||
this.nofitication.create(
|
||||
// ...
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
</n-space>
|
||||
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
@ -18,37 +47,35 @@ duration
|
||||
|scrollable|`boolean`|`true`||
|
||||
|to|`string \| HTMLElement`|`'body'`||
|
||||
|
||||
### NotificationProvider Injection API
|
||||
#### NotificationProvider Injection Methods
|
||||
### `notification` Injection Methods
|
||||
|名称|类型|说明|
|
||||
|-|-|-|
|
||||
|create|`(option: NotificationOption) => NotificationReactive`||
|
||||
|success|`(option: NotificationOption) => NotificationReactive`||
|
||||
|info|`(option: NotificationOption) => NotificationReactive`||
|
||||
|warning|`(option: NotificationOption) => NotificationReactive`||
|
||||
|error|`(option: NotificationOption) => NotificationReactive`||
|
||||
|info|`(option: NotificationOption) => NotificationReactive`||
|
||||
|success|`(option: NotificationOption) => NotificationReactive`||
|
||||
|warning|`(option: NotificationOption) => NotificationReactive`||
|
||||
|
||||
### NotificationOption API
|
||||
#### NotificationOption Properties
|
||||
### NotificationOption Properties
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|action|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|
||||
|avatar|`() => VNode \| Array<VNode>`|`null`|可以是 render 函数|
|
||||
|action|`string \| (() => VNode \| Array<VNode>)`|`undefined`|可以是 render 函数|
|
||||
|avatar|`() => VNode \| Array<VNode>`|`undefined`|可以是 render 函数|
|
||||
|closable|`boolean`|`true`||
|
||||
|content|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|
||||
|description|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|
||||
|duration|`number`|`null`|如果没有设定则不会自动关闭,单位毫秒|
|
||||
|meta|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|
||||
|content|`string \| (() => VNode \| Array<VNode>)`|`undefined`|可以是 render 函数|
|
||||
|description|`string \| (() => VNode \| Array<VNode>)`|`undefined`|可以是 render 函数|
|
||||
|duration|`number`|`undefined`|如果没有设定则不会自动关闭,单位毫秒|
|
||||
|meta|`string \| (() => VNode \| Array<VNode>)`|`undefined`|可以是 render 函数|
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|
||||
|onAfterEnter|`Function`|`null`||
|
||||
|onAfterLeave|`Function`|`null`||
|
||||
|onClose|`() => boolean \| Promise<boolean>`|`() => {}`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭|
|
||||
|onLeave|`Function`||
|
||||
|title|`string \| (() => VNode \| Array<VNode>)`|`undefined`|可以是 render 函数|
|
||||
|onAfterEnter|`Function`|`undefined`||
|
||||
|onAfterLeave|`Function`|`undefined`||
|
||||
|onClose|`() => boolean \| Promise<boolean>`|`undefined`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭|
|
||||
|onLeave|`Function`|`undefined`||
|
||||
|
||||
### NotificationReactive API
|
||||
#### NotificationReactive Properties
|
||||
NofiticationEnvironment 实例的属性可以被动态改变。
|
||||
NotificationReactive 实例的属性可以被动态改变。
|
||||
|
||||
|名称|类型|说明|
|
||||
|-|-|-|
|
||||
@ -62,7 +89,7 @@ NofiticationEnvironment 实例的属性可以被动态改变。
|
||||
|title|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|
|
||||
|onAfterEnter|`Function`||
|
||||
|onAfterLeave|`Function`||
|
||||
|onClose|`() => boolean \| Promise<boolean>`|`() => {}`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭|
|
||||
|onClose|`() => boolean \| Promise<boolean>`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭|
|
||||
|onLeave|`Function`||
|
||||
|
||||
#### NotificationReactive Methods
|
||||
|
@ -26,8 +26,3 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
@ -97,31 +97,31 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
type: Function,
|
||||
default: null
|
||||
default: undefined
|
||||
},
|
||||
title: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
default: undefined
|
||||
},
|
||||
description: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
default: undefined
|
||||
},
|
||||
content: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
default: undefined
|
||||
},
|
||||
meta: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
default: undefined
|
||||
},
|
||||
action: {
|
||||
type: Function,
|
||||
default: null
|
||||
default: undefined
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
Loading…
Reference in New Issue
Block a user