mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(notification): specify theme

Browse Source
This commit is contained in:
07akioni 2020-03-19 22:21:09 +08:00
parent 78e4ec0bdd
commit a8afd8a8be
5 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ duration
### $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`||
@ -29,12 +30,13 @@ duration
### NotificationOption Type
|Name|Type|Default|Description|
|-|-|-|-|
|avatar|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be render function|
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be render function|
|description|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be render function|
|content|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be render function|
|meta|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be render function|
|action|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be render function|
|theme|`'light' \| 'dark'`|`null`||
|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|
|closable|`boolean`|`true`||
|onClose|`() => boolean \| Promise<boolean>`|`() => {}`|The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing.|
|onAfterHide|`function`|`null`||
@ -47,12 +49,12 @@ Properties of NofiticationEnvironment Instance can be dynamically set.
|Name|Type|Description|
|-|-|-|
|avatar|`string \| (() => VNode \| Array<VNode>)`|Can be render function|
|title|`string \| (() => VNode \| Array<VNode>)`|Can be render function|
|description|`string \| (() => VNode \| Array<VNode>)`|Can be render function|
|content|`string \| (() => VNode \| Array<VNode>)`|Can be render function|
|meta|`string \| (() => VNode \| Array<VNode>)`|Can be render function|
|action|`string \| (() => VNode \| Array<VNode>)`|Can be render function|
|avatar|`string \| (() => 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|
|closable|`boolean`||
|onClose|`(next: function) => any`|Callback when close button is clicked. Only if next is called notification will close|
|onHide|`function`||

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

@ -33,7 +33,8 @@ duration
|名称|类型|默认值|说明|
|-|-|-|-|
|avatar|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|theme|`'light' \| 'dark'`|`null`||
|avatar|`() => VNode \| Array<VNode>`|`null`|可以是 render 函数|
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|description|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|content|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|

8
src/Notification/src/NotificationEnvironment.vue
View File

@ -18,6 +18,7 @@ export default {
type: 'default',
active: true,
theme: null,
inheritedTheme: null,
avatar: null,
title: null,
description: null,
@ -31,6 +32,11 @@ export default {
onAfterHide: () => {}
}
},
computed: {
syntheticTheme () {
return this.theme || this.inheritedTheme
}
},
mounted () {
if (this.duration !== null) {
window.setTimeout(this.hide, this.duration)
@ -100,7 +106,7 @@ export default {
this.active ? h(NNotification, {
props: {
type: this.type,
theme: this.theme,
theme: this.syntheticTheme,
avatar: this.avatar,
title: this.title,
description: this.description,

4
src/Notification/src/NotificationPlugin.js
View File

@ -102,7 +102,7 @@ const Notification = {
container.theme = theme
}
Notification.instances.forEach(instance => {
instance.theme = theme
instance.inheritedTheme = theme
})
},
open (options, type = 'default') {
@ -110,7 +110,7 @@ const Notification = {
if (Notification.container && Notification.theme) {
Notification.container.theme = Notification.theme
}
const notificationOptions = { theme: Notification.theme, type, ...options }
const notificationOptions = { type, ...options, theme: options.theme || Notification.theme }
const instance = createNotification(notificationOptions)
mountNotification(instance)
return instance

1
think.md
View File

@ -216,6 +216,7 @@ zindex 的问题解决了，虽然很简单，在 static 元素上设定 zindex
81. 搞明白 vue 的 scoped 和 普通的关系
82. Form Item 不返回 true 的时候... 错误信息不会消失，这似乎不太合理?
83. Form Item 应该和 Input Group 也契合良好
84. Notification 主题切换需要工作良好
```
Done