mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
doc(notification)
This commit is contained in:
07akioni
parent
9d70f6d5d7
commit
163a34a3b6
@ -0,0 +1,67 @@
|
||||
# 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>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
notification: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
this.notification = this.$NNotification.open({
|
||||
title: `Wouldn't it be Nice`,
|
||||
description: 'From the Beach Boys',
|
||||
content: `Wouldn't it be nice if we were older
|
||||
Then we wouldn't have to wait so long
|
||||
And wouldn't it be nice to live together
|
||||
In the kind of world where we belong
|
||||
You know its gonna make it that much better
|
||||
When we can say goodnight and stay together
|
||||
Wouldn't it be nice if we could wake up
|
||||
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://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg'
|
||||
}
|
||||
}),
|
||||
onClose: (next) => {
|
||||
next()
|
||||
this.notification = null
|
||||
}
|
||||
})
|
||||
},
|
||||
change () {
|
||||
if (this.notification) {
|
||||
this.notification.content = h => h('img', {
|
||||
attrs: {
|
||||
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg'
|
||||
},
|
||||
style: {
|
||||
width: '100%'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -1,4 +1,4 @@
|
||||
# Closabe
|
||||
# Closable
|
||||
You can make it unclosable.
|
||||
```html
|
||||
<n-button @click="notify('info')">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Duration & Update Notification
|
||||
I'm too tired to spilt it into two examples...
|
||||
# Duration
|
||||
Auto close.
|
||||
```html
|
||||
<n-button @click="notify('info')">
|
||||
Duration: 10000
|
||||
|
||||
@ -1,8 +1,54 @@
|
||||
# Notification
|
||||
If something is to be telled to you.
|
||||
|
||||
UI has designed it long long ago. However, you know, it is always with low piority so I can make a lot of useless animations on it.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
type
|
||||
change-content
|
||||
scrollable
|
||||
closable
|
||||
duration
|
||||
```
|
||||
## API
|
||||
### $NNotification API
|
||||
|Property|Type|Description|
|
||||
|-|-|-|
|
||||
|open|`(option: NotificationOption, type: string): NotificationEnvironment`||
|
||||
|success|`(option: NofiticationOption): NotificationEnvironment`||
|
||||
|info|`(option: NofiticationOption): NotificationEnvironment`||
|
||||
|warning|`(option: NofiticationOption): NotificationEnvironment`||
|
||||
|error|`(option: NofiticationOption): NotificationEnvironment`||
|
||||
|scrollable|`boolean`|Default is set to `true`|
|
||||
|
||||
### NotificationOption API
|
||||
|Property|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|avatar|`string \| function`|`null`|Can be render function|
|
||||
|title|`string \| function`|`null`|Can be render function|
|
||||
|description|`string \| function`|`null`|Can be render function|
|
||||
|content|`string \| function`|`null`|Can be render function|
|
||||
|meta|`string \| function`|`null`|Can be render function|
|
||||
|action|`string \| function`|`null`|Can be render function|
|
||||
|closable|`boolean`|`true`||
|
||||
|onClose|`(next: function) => any`|`next => next()`|Only if next is called notification will close|
|
||||
|onAfterClose|`function`|`null`||
|
||||
|onAfterOpen|`function`|`null`||
|
||||
|duration|`number`|`null`|If not set, it won't automatically close|
|
||||
|
||||
### NotificationEnvironment API
|
||||
Property of Instance of NofiticationEnvironment can be dynamically set.
|
||||
|
||||
|Property|Type|Description|
|
||||
|-|-|-|
|
||||
|avatar|`string \| function`|Can be render function|
|
||||
|title|`string \| function`|Can be render function|
|
||||
|description|`string \| function`|Can be render function|
|
||||
|content|`string \| function`|Can be render function|
|
||||
|meta|`string \| function`|Can be render function|
|
||||
|action|`string \| function`|Can be render function|
|
||||
|closable|`boolean`||
|
||||
|onClose|`(next: function) => any`|Only if next is called notification will close|
|
||||
|onAfterClose|`function`||
|
||||
|onAfterOpen|`function`||
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.duration) {
|
||||
if (this.duration !== null) {
|
||||
window.setTimeout(this.close, this.duration)
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user