test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 11:17:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(components): [notification] api (#12293)

Browse Source 
* docs(components): [notification]

* docs(components): [notification]
This commit is contained in:
Xc 2023-04-07 14:36:23 +08:00 committed by GitHub
parent 430a167ec0
commit e02c4c5605
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
docs/en-US/component/notification.md
View File

@ -104,28 +104,31 @@ const { appContext } = getCurrentInstance()!
ElNotification({}, appContext)
```
## Options
## API
| Attribute | Description | Type | Accepted Values | Default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ------------------------------------------- | ------------- |
| title | title | string | — | — |
| message | description text | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
| type | notification type | string | success/warning/info/error | — |
| icon | custom icon component. It will be overridden by `type` | `string \| Component` | — | — |
| customClass | custom class name for Notification | string | — | — |
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | whether to show a close button | boolean | — | true |
| onClose | callback function when closed | function | — | — |
| onClick | callback function when notification clicked | function | — | — |
| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
| appendTo | set the root element for the notification | string / HTMLElement | - | document.body |
| zIndex | initial zIndex | number | - | 0 |
### Options
## Methods
| Name | Description | Type | Default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- | --------- |
| title | title | ^[string] | '' |
| message | description text | ^[string] / ^[VNode] | '' |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
| type | notification type | ^[enum]`'success' \| 'warning' \| 'info' \| 'error' \| ''` | '' |
| icon | custom icon component. It will be overridden by `type` | ^[string] / ^[Component] | — |
| customClass | custom class name for Notification | ^[string] | '' |
| duration | duration before close. It will not automatically close if set 0 | ^[number] | 4500 |
| position | custom position | ^[enum]`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | top-right |
| showClose | whether to show a close button | ^[boolean] | true |
| onClose | callback function when closed | ^[Function]`() => void` | — |
| onClick | callback function when notification clicked | ^[Function]`() => void` | — |
| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | ^[number] | 0 |
| appendTo | set the root element for the notification, default to `document.body` | ^[string] / ^[HTMLElement] | — |
| zIndex | initial zIndex | ^[number] | 0 |
### Method
`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it.
| Method | Description |
| ---- | ---- |
| close | close the Notification |
| Name | Description | Type |
| ----- | ---------------------- | ----------------------- |
| close | close the Notification | ^[Function]`() => void` |

45
packages/components/notification/src/notification.ts
View File

@ -11,59 +11,101 @@ export const notificationTypes = [
] as const
export const notificationProps = buildProps({
/**
* @description custom class name for Notification
*/
customClass: {
type: String,
default: '',
},
/**
* @description whether `message` is treated as HTML string
*/
dangerouslyUseHTMLString: {
type: Boolean,
default: false,
},
/**
* @description duration before close. It will not automatically close if set 0
*/
duration: {
type: Number,
default: 4500,
},
/**
* @description custom icon component. It will be overridden by `type`
*/
icon: {
type: iconPropType,
},
/**
* @description notification dom id
*/
id: {
type: String,
default: '',
},
/**
* @description description text
*/
message: {
type: definePropType<string | VNode>([String, Object]),
default: '',
},
/**
* @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset
*/
offset: {
type: Number,
default: 0,
},
/**
* @description callback function when notification clicked
*/
onClick: {
type: definePropType<() => void>(Function),
default: () => undefined,
},
/**
* @description callback function when closed
*/
onClose: {
type: definePropType<() => void>(Function),
required: true,
},
/**
* @description custom position
*/
position: {
type: String,
values: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
default: 'top-right',
},
/**
* @description whether to show a close button
*/
showClose: {
type: Boolean,
default: true,
},
/**
* @description title
*/
title: {
type: String,
default: '',
},
/**
* @description notification type
*/
type: {
type: String,
values: [...notificationTypes, ''],
default: '',
},
/**
* @description initial zIndex
*/
zIndex: {
type: Number,
default: 0,
@ -79,6 +121,9 @@ export type NotificationEmits = typeof notificationEmits
export type NotificationInstance = InstanceType<typeof Notification>
export type NotificationOptions = Omit<NotificationProps, 'id'> & {
/**
* @description set the root element for the notification, default to `document.body`
*/
appendTo?: HTMLElement | string
}
export type NotificationOptionsTyped = Omit<NotificationOptions, 'type'>