test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(components): [message-box] (#13470)

Browse Source
This commit is contained in:
btea 2023-07-05 21:17:47 +08:00 committed by GitHub
parent 2c605cb794
commit a5970049d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
docs/en-US/component/message-box.md
View File

@ -154,41 +154,43 @@ import { ElMessageBox } from 'element-plus'
The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageBox.confirm` and `ElMessageBox.prompt`. The parameters are the same as above.
## Options
## API
| Attribute | Description | Type | Accepted Values | Default |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
| autofocus | auto focus when open MessageBox | boolean | — | true |
| title | title of the MessageBox | string | — | — |
| message | content of the MessageBox | `string \| VNode \| (() => VNode)` | — | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
| type | message type, used for icon display | string | success / info / warning / error | — |
| icon | custom icon component, overrides `type` | `string \| Component` | — | — |
| custom-class | custom class name for MessageBox | string | — | — |
| custom-style | custom inline style for MessageBox | CSSProperties | — | — |
| callback | MessageBox closing callback if you don't prefer Promise | function(action, instance), where `action` can be 'confirm', 'cancel' or 'close', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
| showClose | whether to show close icon of MessageBox | boolean | — | true |
| before-close | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm', 'cancel' or 'close'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
| distinguish-cancel-and-close | whether to distinguish canceling and closing the MessageBox | boolean | — | false |
| lock-scroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
| show-cancel-button | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
| show-confirm-button | whether to show a confirm button | boolean | — | true |
| cancel-button-text | text content of cancel button | string | — | Cancel |
| confirm-button-text | text content of confirm button | string | — | OK |
| cancel-button-class | custom class name of cancel button | string | — | — |
| confirm-button-class | custom class name of confirm button | string | — | — |
| close-on-click-modal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) |
| close-on-press-escape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) |
| close-on-hash-change | whether to close MessageBox when hash changes | boolean | — | true |
| show-input | whether to show an input | boolean | — | false (true when called with prompt) |
| input-placeholder | placeholder of input | string | — | — |
| input-type | type of input | string | — | text |
| input-value | initial value of input | string | — | — |
| input-pattern | regexp for the input | regexp | — | — |
| input-validator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
| input-error-message | error message when validation fails | string | — | Illegal input |
| center | whether to align the content in center | boolean | — | false |
| draggable | whether MessageBox is draggable | boolean | — | false |
| round-button | whether to use round button | boolean | — | false |
| button-size | custom size of confirm and cancel buttons | string | small / default / large | default |
| append-to | set the root element for the message box | string \| HTMLElement | — | — |
### Options
| Name | Description | Type | Default |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------ |
| autofocus | auto focus when open MessageBox | ^[boolean] | true |
| title | title of the MessageBox | ^[string] | '' |
| message | content of the MessageBox | ^[string] / ^[VNode] / ^[Function]`() => VNode` | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
| type | message type, used for icon display | ^[enum]`'success' \| 'info' \| 'warning' \| 'error'` | '' |
| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | '' |
| custom-class | custom class name for MessageBox | ^[string] | '' |
| custom-style | custom inline style for MessageBox | ^[CSSProperties] | {} |
| callback | MessageBox closing callback if you don't prefer Promise | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any` | null |
| showClose | whether to show close icon of MessageBox | ^[boolean] | true |
| before-close | callback before MessageBox closes, and it will prevent MessageBox from closing | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null |
| distinguish-cancel-and-close | whether to distinguish canceling and closing the MessageBox | ^[boolean] | false |
| lock-scroll | whether to lock body scroll when MessageBox prompts | ^[boolean] | true |
| show-cancel-button | whether to show a cancel button | ^[boolean] | false (true when called with confirm and prompt) |
| show-confirm-button | whether to show a confirm button | ^[boolean] | true |
| cancel-button-text | text content of cancel button | ^[string] | Cancel |
| confirm-button-text | text content of confirm button | ^[string] | OK |
| cancel-button-class | custom class name of cancel button | ^[string] | '' |
| confirm-button-class | custom class name of confirm button | ^[string] | '' |
| close-on-click-modal | whether MessageBox can be closed by clicking the mask | ^[boolean] | true (false when called with alert) |
| close-on-press-escape | whether MessageBox can be closed by pressing the ESC | ^[boolean] | true (false when called with alert) |
| close-on-hash-change | whether to close MessageBox when hash changes | ^[boolean] | true |
| show-input | whether to show an input | ^[boolean] | false (true when called with prompt) |
| input-placeholder | placeholder of input | ^[string] | '' |
| input-type | type of input | ^[string] | text |
| input-value | initial value of input | ^[string] | null |
| input-pattern | regexp for the input | ^[regexp] | null | |
| input-validator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | ^[Function]`(value: string) => boolea \| string` | null |
| input-error-message | error message when validation fails | ^[string] | Illegal input |
| center | whether to align the content in center | ^[boolean] | false |
| draggable | whether MessageBox is draggable | ^[boolean] | false |
| round-button | whether to use round button | ^[boolean] | false |
| button-size | custom size of confirm and cancel buttons | ^[string]`'small' \| 'default' \| 'large'` | default |
| append-to | set the root element for the message box | ^[string] / ^[HTMLElement] | - |