diff --git a/demo/documentation/components/notification/enUS/changeContent.md b/demo/documentation/components/notification/enUS/changeContent.md
new file mode 100644
index 000000000..f944b7bf3
--- /dev/null
+++ b/demo/documentation/components/notification/enUS/changeContent.md
@@ -0,0 +1,67 @@
+# Change Content Dynamically
+You can change any parts of notifications existed.
+```html
+
+ Open it
+
+
+ Change it
+
+```
+```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;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/notification/enUS/closable.md b/demo/documentation/components/notification/enUS/closable.md
index c3424186e..9b83e84a4 100644
--- a/demo/documentation/components/notification/enUS/closable.md
+++ b/demo/documentation/components/notification/enUS/closable.md
@@ -1,4 +1,4 @@
-# Closabe
+# Closable
You can make it unclosable.
```html
diff --git a/demo/documentation/components/notification/enUS/duration.md b/demo/documentation/components/notification/enUS/duration.md
index b367160a8..2d1006d71 100644
--- a/demo/documentation/components/notification/enUS/duration.md
+++ b/demo/documentation/components/notification/enUS/duration.md
@@ -1,5 +1,5 @@
-# Duration & Update Notification
-I'm too tired to spilt it into two examples...
+# Duration
+Auto close.
```html
Duration: 10000
diff --git a/demo/documentation/components/notification/enUS/index.md b/demo/documentation/components/notification/enUS/index.md
index 68c96a776..d38a4a1ee 100644
--- a/demo/documentation/components/notification/enUS/index.md
+++ b/demo/documentation/components/notification/enUS/index.md
@@ -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
-```
\ No newline at end of file
+```
+## 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`||
\ No newline at end of file
diff --git a/packages/common/Notification/src/NotificationEnvironment.vue b/packages/common/Notification/src/NotificationEnvironment.vue
index 1a71a9192..dd5a23818 100644
--- a/packages/common/Notification/src/NotificationEnvironment.vue
+++ b/packages/common/Notification/src/NotificationEnvironment.vue
@@ -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)
}
},