javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [message] (#12295)

Browse Source
This commit is contained in:
Xc
2023-04-07 00:46:20 +08:00
committed by GitHub
parent ff3b7b5b43
commit 430a167ec0
2 changed files with 67 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/en-US/component/message.md
View File

@@ -106,29 +106,30 @@ const { appContext } = getCurrentInstance()!
ElMessage({}, appContext)
```
## Message API
## API
### Options
| Attribute | Description | Type | Default |
| -------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------- | --------------- |
| `message` | message text | `string \| VNode \| (() => VNode)` | — |
| `type` | message type | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'` |
| `icon` | custom icon component, overrides `type` | `string \| Component` | — |
| `dangerouslyUseHTMLString` | whether `message` is treated as HTML string | `boolean` | `false` |
| `custom-class` | custom class name for Message | `string` | — |
| `duration` | display duration, millisecond. If set to 0, it will not turn off automatically | `number` | `3000` |
| `show-close` | whether to show a close button | `boolean` | `false` |
| `center` | whether to center the text | `boolean` | `false` |
| `on-close` | callback function when closed with the message instance as the parameter | `function` | — |
| `offset` | set the distance to the top of viewport | `number` | `20` |
| `appendTo` | set the root element for the message | `string \| HTMLElement` | `document.body` |
| `grouping` | merge messages with the same content, type of VNode message is not supported | `boolean` | `false` |
| Name | Description | Type | Default |
| ------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
| message | message text | ^[string] / ^[VNode] / ^[Function]`() => VNode` | '' |
| type | message type | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info |
| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
| customClass | custom class name for Message | ^[string] | '' |
| duration | display duration, millisecond. If set to 0, it will not turn off automatically | ^[number] | 3000 |
| showClose | whether to show a close button | ^[boolean] | false |
| center | whether to center the text | ^[boolean] | false |
| onClose | callback function when closed with the message instance as the parameter | ^[Function]`() => void` | — |
| offset | set the distance to the top of viewport | ^[number] | 16 |
| appendTo | set the root element for the message, default to `document.body` | ^[string] / ^[HTMLElement] | — |
| grouping | merge messages with the same content, type of VNode message is not supported | ^[boolean] | false |
| repeatNum | The number of repetitions, similar to badge, is used as the initial number when used with `grouping` | ^[number] | 1 |
### Methods
`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
| Method | Description |
| ------- | ----------------- |
| `close` | close the Message |
| Name | Description | Type |
| ----- | ----------------- | ----------------------- |
| close | close the Message | ^[Function]`() => void` |

48
packages/components/message/src/message.ts
View File

@@ -36,30 +36,51 @@ export const messageDefaults = mutable({
} as const)
export const messageProps = buildProps({
/**
* @description custom class name for Message
*/
customClass: {
type: String,
default: messageDefaults.customClass,
},
/**
* @description whether to center the text
*/
center: {
type: Boolean,
default: messageDefaults.center,
},
/**
* @description whether `message` is treated as HTML string
*/
dangerouslyUseHTMLString: {
type: Boolean,
default: messageDefaults.dangerouslyUseHTMLString,
},
/**
* @description display duration, millisecond. If set to 0, it will not turn off automatically
*/
duration: {
type: Number,
default: messageDefaults.duration,
},
/**
* @description custom icon component, overrides `type`
*/
icon: {
type: iconPropType,
default: messageDefaults.icon,
},
/**
* @description message dom id
*/
id: {
type: String,
default: messageDefaults.id,
},
/**
* @description message text
*/
message: {
type: definePropType<string | VNode | (() => VNode)>([
String,
@@ -68,31 +89,52 @@ export const messageProps = buildProps({
]),
default: messageDefaults.message,
},
/**
* @description callback function when closed with the message instance as the parameter
*/
onClose: {
type: definePropType<() => void>(Function),
required: false,
},
/**
* @description whether to show a close button
*/
showClose: {
type: Boolean,
default: messageDefaults.showClose,
},
/**
* @description message type
*/
type: {
type: String,
values: messageTypes,
default: messageDefaults.type,
},
/**
* @description set the distance to the top of viewport
*/
offset: {
type: Number,
default: messageDefaults.offset,
},
/**
* @description input box size
*/
zIndex: {
type: Number,
default: messageDefaults.zIndex,
},
/**
* @description merge messages with the same content, type of VNode message is not supported
*/
grouping: {
type: Boolean,
default: messageDefaults.grouping,
},
/**
* @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`
*/
repeatNum: {
type: Number,
default: messageDefaults.repeatNum,
@@ -116,6 +158,9 @@ export type MessageOptions = Partial<
>
export type MessageParams = MessageOptions | MessageOptions['message']
export type MessageParamsNormalized = Omit<MessageProps, 'id'> & {
/**
* @description set the root element for the message, default to `document.body`
*/
appendTo: HTMLElement
}
export type MessageOptionsWithType = Omit<MessageOptions, 'type'>
@@ -124,6 +169,9 @@ export type MessageParamsWithType =
| MessageOptions['message']
export interface MessageHandler {
/**
* @description close the Message
*/
close: () => void
}