docs(notification): vue3

This commit is contained in:
07akioni 2020-10-22 19:14:56 +08:00
parent c7fb6eb2ec
commit e8363f9b64
12 changed files with 216 additions and 179 deletions

View File

@ -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
}
}

View File

@ -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;
}
```

View File

@ -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;
}
```

View File

@ -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;
}
```

View File

@ -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|

View File

@ -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;
}
```

View File

@ -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;
}
```
```

View File

@ -34,8 +34,3 @@ export default {
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

View File

@ -38,8 +38,3 @@ export default {
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

View File

@ -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

View File

@ -26,8 +26,3 @@ export default {
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

View File

@ -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: {