mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
883fd8d6ef
* refactor(components): el-alert icon (#3441) * refactor(components): el-alert icon * fix: el-alert test * fix: [el-alert] lint error * feat(utils): add icon util * refactor(components): el-alert icon * refactor(utils): icon * test: update alert test * refactor: remove el-icon in util * refactor(components): el-notification icon (#3512) * chore: temp save changes * refactor: update icon * fix: var * docs: update icon * fix: type class error * style: remove unused class * fix: update icon type * docs: update icon * fix: update iconComponent * refactor(components): el-dialog icon (#3505) * refactor(components): [el-dialog] icon * fix: typo * refactor: dialog icon ref * refactor: dialog icon * style: update close button size * refactor(components): el-message-box icon (#3507) * refactor(components): message-box icon * refactor(components): message icon * fix: test * refactor: update ref * fix: test * docs: update icon * fix: delete unused code * docs: update type * fix: update close button size * fix: type * fix: icon type class * fix: icon type * fix: update type class * refactor(components): el-popconfirm icon (#3513) * refactor(components): el-popconfirm icon * fix: space styles * docs: update example * docs: update example for trigger event * refactor(components): el-page-header icon (#3518) * refactor(components): el-page-header icon * docs: update icon * fix: space errors * refactor(components): el-steps icon (#3520) * refactor(components): el-backtop icon (#3514) * refactor(components): el-backtop icon * fix: update font size * refactor(components): el-button icon (#3536) * refactor(components): el-button icon * fix: update example * refactor(components): el-button icon * refactor: style simplify Co-authored-by: imswk <syfzxx@vip.qq.com> * refactor(components): el-tree icon (#3590) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-avatar icon (#3599) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-carousel icon (#3602) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-progress icon (#3607) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-result icon (#3609) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-timeline icon (#3646) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-table icon (#3611) Co-authored-by: qianjie <qianjie@patsnap.com> * chore: add vue to gitignore * fix: buildProp error * refactor(components): el-pagination icon (#3605) * test: el-menu deprecated icon font (#3794) * test: el-loading deprecated icon font (#3795) * chore: Update changelog 1.1.0-beta.20 (#3838) * fix: about custom extension of table column (#3437) * refactor(components): el-autocomplete icon (#3783) * refactor(components): el-dropdown icon (#3517) * refactor(components): el-dropdown icon * fix: arrow down icon size * style: revert * fix: font-size * refactor(components): el-link icon (#3538) * refactor(components): el-link icon * refactor: update example * fix: import icons * docs: add tip * refactor: update link icon * fix: icon align * fix: typo * refactor(components): el-select icon (#3780) * refactor(components): el-input icon (#3565) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * docs: icon usage * fix: input style * fix: add scoped * docs: fix icon * fix: icon align * fix: icon align * fix: typo * fix: typo * refactor(components): el-input-number icon (#3566) * refactor(components): el-input-number icon * fix: icon align * refactor(components): el-tag icon (#3793) * refactor(components): el-tag icon * fix: icon align * fix: icon margin * refactor(components): el-switch icon (#3787) * refactor(components): el-switch icon * fix: icon align * docs: add icon usage * refactor(components): el-collapse icon (#3788) * refactor(components): el-collapse icon * docs: update icon demo * fix: typo * refactor(components): el-uplod icon (#3598) * refactor(components): el-uplod icon * docs: update icon useage * docs: fix icon * docs: fix icon * docs: update upload-filled icon * fix: icon align * fix: item icon align * refactor(components): el-select-v2 icon (#3781) * refactor(components): el-select-v2 icon * revert: play/main.ts * fix: icon style * fix: icon solt * refactor(components): el-cascader icon (#3785) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-cascader icon * refactor(components): el-tag icon * fix: icon align * fix: icon margin * docs: icon usage * fix: input style * fix: add scoped * test: remove unuesd code * fix: cascader-panel * fix: icon style * fix: icon animation * refactor(components): el-drawer icon (#3796) * refactor(components): el-drawer icon * fix: close icon size * fix: close icon align * refactor(components): el-transfer icon (#3792) * refactor(components): el-transfer icon * fix: icon align * refactor(components): el-image-viewer icon (#3797) * refactor(components): el-image-view icon * fix: icon size * docs: update domo * style: format vue * fix: fullscreen icon * Add cursor for icons Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * refactor(components): rate-icon (#3891) * refactor(components): el-rate icon * docs: update example * docs: update * test: update * docs: update * fix: variable rename * fix: demo update * fix: allow half bug * refactor(components): el-time-picker icon (#3834) * refactor(components): el-button icon * refactor(components): date-picker icon * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-time-select icon * fix: icon width * docs: icon usage * fix: input style * fix: add scoped * fix: icon size * docs: icon display * fix: icon in button * docs: fix error * refactor(components): el-time-picker icon * fix: var * fix: icon align * test: delete unused code * test: fix error * fix: remove unused code * docs: fix typo * docs: update icon * fix: default prefix icon * fix: range picker icon align * Update cursor for picker Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * fix(components): el-input close icon * chore: delete fonts * fix: copy full style Co-authored-by: imswk <syfzxx@vip.qq.com> Co-authored-by: bastarder <85257684@qq.com> Co-authored-by: qianjie <qianjie@patsnap.com> Co-authored-by: Element <wallement@gmail.com> Co-authored-by: Alan Wang <948467222@qq.com> Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
152 lines
21 KiB
Markdown
152 lines
21 KiB
Markdown
---
|
||
title: Message
|
||
lang: en-US
|
||
---
|
||
|
||
# Message Box
|
||
|
||
A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.
|
||
|
||
:::tip
|
||
|
||
By design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`,so it's content should be simple. For more complicated contents, please use Dialog.
|
||
|
||
:::
|
||
|
||
## Alert
|
||
|
||
Alert interrupts user operation until the user confirms.
|
||
|
||
:::demo Open an alert by calling the `$alert` method. It simulates the system's `alert`, and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters `message` and `title` are received. It is worth mentioning that when the box is closed, it returns a `Promise` object for further processing. If you are not sure if your target browsers support `Promise`, you should import a third party polyfill or use callbacks instead like this example.
|
||
|
||
message-box/alert
|
||
|
||
:::
|
||
|
||
## Confirm
|
||
|
||
Confirm is used to ask users' confirmation.
|
||
|
||
:::demo Call `$confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing.
|
||
|
||
message-box/confirm
|
||
|
||
:::
|
||
|
||
## Prompt
|
||
|
||
Prompt is used when user input is required.
|
||
|
||
:::demo Call `$prompt` method to open a prompt, and it simulates the system's `prompt`. You can use `inputPattern` parameter to specify your own RegExp pattern. Use `inputValidator` to specify validation method, and it should return `Boolean` or `String`. Returning `false` or `String` means the validation has failed, and the string returned will be used as the `inputErrorMessage`. In addition, you can customize the placeholder of the input box with `inputPlaceholder` parameter.
|
||
|
||
message-box/prompt
|
||
|
||
:::
|
||
|
||
## Customization
|
||
|
||
Can be customized to show various content.
|
||
|
||
:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: `action`, `instance` and `done`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `done` method to close the MessageBox instance (if `done` is not called inside `beforeClose`, the instance will not be closed).
|
||
|
||
message-box/customization
|
||
|
||
:::
|
||
|
||
:::tip
|
||
|
||
The content of MessageBox can be `VNode`, allowing us to pass custom components. When opening the MessageBox, Vue compares new `VNode` with old `VNode`, then figures out how to efficiently update the UI, so the components may not be completely re-rendered ([#8931](https://github.com/ElemeFE/element/issues/8931)). In this case, you can add a unique key to `VNode` each time MessageBox opens: [example](https://jsfiddle.net/zhiyang/ezmhq2ef).
|
||
|
||
:::
|
||
|
||
## Use HTML String
|
||
|
||
`message` supports HTML string.
|
||
|
||
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
|
||
|
||
message-box/use-html
|
||
|
||
:::
|
||
|
||
:::warning
|
||
|
||
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
|
||
|
||
:::
|
||
|
||
## Distinguishing cancel and close
|
||
|
||
In some cases, clicking the cancel button and close button may have different meanings.
|
||
|
||
:::demo By default, the parameters of Promise's reject callback and `callback` are 'cancel' when the user cancels (clicking the cancel button) and closes (clicking the close button or mask layer, pressing the ESC key) the MessageBox. If `distinguishCancelAndClose` is set to true, the parameters of the above two operations are 'cancel' and 'close' respectively.
|
||
|
||
message-box/distinguishable-close-cancel
|
||
|
||
:::
|
||
|
||
## Centered content
|
||
|
||
Content of MessageBox can be centered.
|
||
|
||
:::demo Setting `center` to `true` will center the content
|
||
|
||
message-box/centered-content
|
||
|
||
:::
|
||
|
||
## Global method
|
||
|
||
If Element Plus is fully imported, it will add the following global methods for `app.config.globalProperties`: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
|
||
|
||
- `$msgbox(options)`
|
||
- `$alert(message, title, options)` or `$alert(message, options)`
|
||
- `$confirm(message, title, options)` or `$confirm(message, options)`
|
||
- `$prompt(message, title, options)` or `$prompt(message, options)`
|
||
|
||
## Local import
|
||
|
||
If you prefer importing `MessageBox` on demand:
|
||
|
||
```ts
|
||
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
|
||
|
||
| Attribute | Description | Type | Accepted Values | Default |
|
||
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
|
||
| title | title of the MessageBox | string | — | — |
|
||
| message | content of the MessageBox | string | — | — |
|
||
| 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), 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 |
|
||
| round-button | whether to use round button | boolean | — | false |
|
||
| button-size | custom size of confirm and cancel buttons | string | mini / small / medium / large | small |
|