mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(notification): zh-cn

Browse Source
This commit is contained in:
07akioni 2020-02-04 14:10:35 +08:00
parent 8f370ed540
commit 360af64447
12 changed files with 380 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/notification/enUS/closable.md
View File

@ -1,4 +1,4 @@
# Closable
# Unclosable
You can make it unclosable.
```html
<n-button @click="notify('info')">

30
demo/documentation/components/notification/enUS/index.md
View File

@ -1,7 +1,7 @@
# Notification
If something is to be telled to you.
If something is to be telled to somebody.
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.
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.
## Demos
```demo
basic
@ -12,18 +12,22 @@ closable
duration
```
## API
### $NNotification API
|Property|Type|Description|
### $NNotification Methods
|Name|Type|Description|
|-|-|-|
|open|`(option: NotificationOption, type: string): NotificationEnvironment`||
|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`||
|scrollable|`boolean`|Default is set to `true`|
### NotificationOption API
|Property|Type|Default|Description|
### $Notification Properties
|Name|Type|Default|Description|
|-|-|-|-|
|scrollable|`boolean`|`false`||
### NotificationOption Type
|Name|Type|Default|Description|
|-|-|-|-|
|avatar|`string \| function`|`null`|Can be render function|
|title|`string \| function`|`null`|Can be render function|
@ -32,16 +36,16 @@ duration
|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|
|onClose|`(next: function) => any`|`next => next()`|Only if next is called notification will close.|
|onAfterHide|`function`|`null`||
|onAfterShow|`function`|`null`||
|duration|`number`|`null`|If not set, it won't automatically close|
|duration|`number`|`null`|If not set, it won't automatically close. Unit is millisecond.|
### NotificationEnvironment API
#### NotificationEnvironment Properties
Properties of Instance of NofiticationEnvironment can be dynamically set.
|Property|Type|Description|
|Name|Type|Description|
|-|-|-|
|avatar|`string \| function`|Can be render function|
|title|`string \| function`|Can be render function|
@ -50,12 +54,12 @@ Properties of Instance of NofiticationEnvironment can be dynamically set.
|meta|`string \| function`|Can be render function|
|action|`string \| function`|Can be render function|
|closable|`boolean`||
|onClose|`(next: function) => any`|Close mark is clicked. Only if next is called notification will close|
|onClose|`(next: function) => any`|Callback when close button is clicked. Only if next is called notification will close|
|onHide|`function`||
|onAfterHide|`function`||
|onAfterShow|`function`||
#### NotificationEnvironment Methods
|Method|Type|Description|
|Name|Type|Description|
|-|-|-|
|hide|`()`||

6
demo/documentation/components/notification/enUS/scrollable.md
View File

@ -1,10 +1,10 @@
# Scrollable
If there are too many notifications, you can scroll them. However 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 turn it off easily.
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.
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</n-button>
<n-button @click="handleClick(false)">unscrollable</n-button>
<n-button @click="handleClick(true)">Scrollable(Open some notifications after click)</n-button>
<n-button @click="handleClick(false)">Unscrollable</n-button>
```
```js
export default {

4
demo/documentation/components/notification/enUS/type.md
View File

@ -18,8 +18,8 @@ export default {
methods: {
notify (type) {
this.$NNotification[type]({
content: `Keep Calm And Make Epic Shit`,
meta: 'From Evan You'
content: `What to say?`,
meta: 'I don\'t know'
})
}
}

83
demo/documentation/components/notification/zhCN/basic.md Normal file
View File

@ -0,0 +1,83 @@
# 基础用法
```html
<n-button @click="notify1">
Wouldn't it be Nice
</n-button>
<n-button @click="notify2">
Satisfaction
</n-button>
```
```js
export default {
methods: {
notify1 () {
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()
},
onAfterHide: () => {
this.$NMessage.success(`Wouldn't it be Nice`)
},
})
},
notify2 () {
let markAsRead = false
const notification = this.$NNotification.open({
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',
{
props: {
text: true,
type: 'primary'
},
on: {
click: () => {
markAsRead = true
notification.hide()
}
}
},
['已读']
),
onClose: (next) => {
if (!markAsRead) {
this.$NMessage.warning('请设为已读')
} else next()
}
})
}
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

67
demo/documentation/components/notification/zhCN/changeContent.md Normal file
View File

@ -0,0 +1,67 @@
# 动态修改内容
你可以修改已经存在的通知
```html
<n-button @click="open">
打开它
</n-button>
<n-button @click="change" :disabled="!notification">
改它
</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;
}
```

39
demo/documentation/components/notification/zhCN/closable.md Normal file
View File

@ -0,0 +1,39 @@
# 不可关闭
通知可以不能被关闭
```html
<n-button @click="notify('info')">
不能关闭
</n-button>
```
```js
export default {
methods: {
notify (type) {
this.$NNotification.open({
title: `你能关掉我吗？`,
duration: 2000,
closable: false,
onAfterHide: () => {
this.$NNotification.open({
title: `哈哈哈哈!`,
duration: 2000,
closable: false,
onAfterHide: () => {
this.$NNotification.open({
title: `你不能`,
duration: 2000,
closable: false,
})
}
})
}
})
}
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

44
demo/documentation/components/notification/zhCN/duration.md Normal file
View File

@ -0,0 +1,44 @@
# 持续时间
自动关闭。
```html
<n-button @click="notify('info')">
持续时间 10000ms
</n-button>
```
```js
export default {
methods: {
notify (type) {
let count = 10
const notification = this.$NNotification.open({
title: `平山道 + 雨 = 什么？`,
content: `你有 ${count} 秒来回答这个问题`,
duration: 10000,
closable: false,
onAfterShow: () => {
const minusCount = () => {
count--
notification.content = `你有 ${count} 秒来回答这个问题`
if (count > 0) {
window.setTimeout(minusCount, 1000)
}
}
window.setTimeout(minusCount, 1000)
},
onAfterHide: () => {
this.$NNotification.open({
title: `答案是平山河`,
content: '这其实连个冷笑话都算不上',
duration: 10000
})
}
})
}
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

69
demo/documentation/components/notification/zhCN/index.md
View File

@ -0,0 +1,69 @@
# 通知 Notification
通知某人。
UI 同志很早就设计完了。但是，你也知道，像是通知组件这种东西优先级不那么高，所以我可以弄一堆没什么用的动画上去。
## 演示
```demo
basic
type
change-content
scrollable
closable
duration
```
## API
#### $Notification API
#### $NNotification Methods
|名称|类型|介绍|
|-|-|-|
|open|`(option: NotificationOption, type: string = 'default'): NotificationEnvironment`|`type` 可以是 `'default'`, `'warning'`, `'info'`, `'success'` 或 `'error'`|
|success|`(option: NofiticationOption): NotificationEnvironment`||
|info|`(option: NofiticationOption): NotificationEnvironment`||
|warning|`(option: NofiticationOption): NotificationEnvironment`||
|error|`(option: NofiticationOption): NotificationEnvironment`||
#### $Notification Properties
|名称|类型|默认值|介绍|
|-|-|-|-|
|scrollable|`boolean`|`false`||
### NotificationOption API
#### NotificationOption Type
|名称|类型|默认值|介绍|
|-|-|-|-|
|avatar|`string \| function`|`null`|可以是 render 函数|
|title|`string \| function`|`null`|可以是 render 函数|
|description|`string \| function`|`null`|可以是 render 函数|
|content|`string \| function`|`null`|可以是 render 函数|
|meta|`string \| function`|`null`|可以是 render 函数|
|action|`string \| function`|`null`|可以是 render 函数|
|closable|`boolean`|`true`||
|onClose|`(next: function) => any`|`next => next()`|只有调用了 next 通知才会被关闭|
|onAfterHide|`function`|`null`||
|onAfterShow|`function`|`null`||
|duration|`number`|`null`|如果没有设定则不会自动关闭，单位毫秒|
### NotificationEnvironment API
#### NotificationEnvironment Properties
NofiticationEnvironment 实例的属性可以被动态改变。
|名称|类型|介绍|
|-|-|-|
|avatar|`string \| function`|可以是 render 函数|
|title|`string \| function`|可以是 render 函数|
|description|`string \| function`|可以是 render 函数|
|content|`string \| function`|可以是 render 函数|
|meta|`string \| function`|可以是 render 函数|
|action|`string \| function`|可以是 render 函数|
|closable|`boolean`||
|onClose|`(next: function) => any`|点击了关闭按钮的回调。只有调用了 next 通知才会被关闭|
|onHide|`function`||
|onAfterHide|`function`||
|onAfterShow|`function`||
#### NotificationEnvironment Methods
|名称|类型|介绍|
|-|-|-|
|hide|`()`||

22
demo/documentation/components/notification/zhCN/scrollable.md Normal file
View File

@ -0,0 +1,22 @@
# 可滚动
如果有太多信息，你可以通过设定 `$NNotification.scrollable = true` 让他们变得可以滚动。但是在那种情况下，通知会比他们看起来的多占据一点点空间，会挡住一些通知外面离通知很近的鼠标操作。如果你不想要这个特性，什么都不做就好。
改变这个属性会导致已经存在全部通知被清空，确保你在何时的时机修改了这个属性。
```html
<n-button @click="handleClick(true)">可以滚动（点完多开几个通知）</n-button>
<n-button @click="handleClick(false)">不可以滚动</n-button>
```
```js
export default {
methods: {
handleClick (scrollable) {
this.$NNotification.scrollable = scrollable
}
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

32
demo/documentation/components/notification/zhCN/type.md Normal file
View File

@ -0,0 +1,32 @@
# 类型
```html
<n-button @click="notify('info')">
信息
</n-button>
<n-button @click="notify('success')">
成功
</n-button>
<n-button @click="notify('warning')">
警告
</n-button>
<n-button @click="notify('error')">
错误
</n-button>
```
```js
export default {
methods: {
notify (type) {
this.$NNotification[type]({
content: `说点啥呢`,
meta: '想不出来'
})
}
}
}
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

2
packages/common/Notification/src/NotificationPlugin.js
View File

@ -86,7 +86,7 @@ const Notification = {
theme: null,
instances: new Set(),
container: null,
_scrollable: true,
_scrollable: false,
get scrollable () {
return Notification._scrollable
},