From 163a34a3b64031818ccf1024b61ca84e44ef64fa Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 30 Jan 2020 20:56:17 +0800 Subject: [PATCH] doc(notification) --- .../notification/enUS/changeContent.md | 67 +++++++++++++++++++ .../components/notification/enUS/closable.md | 2 +- .../components/notification/enUS/duration.md | 4 +- .../components/notification/enUS/index.md | 48 ++++++++++++- .../src/NotificationEnvironment.vue | 4 +- 5 files changed, 119 insertions(+), 6 deletions(-) create mode 100644 demo/documentation/components/notification/enUS/changeContent.md 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) } },