mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

MessageBox: add distinguishCancelAndClose (#11831)

Browse Source
This commit is contained in:
杨奕
2018-07-03 12:02:21 +08:00
committed by hetech
parent b799d2ec4d
commit 5ef3d0ec8d
7 changed files with 239 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
examples/docs/en-US/message-box.md
View File

@@ -100,6 +100,28 @@
},
open6() {
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
cancelButtonText: 'Discard Changes'
})
.then(() => {
this.$message({
type: 'info',
message: 'Changes saved. Proceeding to a new route.'
});
})
.catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? 'Changes discarded. Proceeding to a new route.'
: 'Stay in the current route'
})
});
},
open7() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
@@ -292,6 +314,7 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
:::
### Use HTML String
`message` supports HTML string.
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
@@ -319,10 +342,11 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
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.
:::
### Centered content
Content of MessageBox can be centered.
### Distinguishing cancel and close
:::demo Setting `center` to `true` will center the content
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.
```html
<template>
@@ -333,6 +357,46 @@ Content of MessageBox can be centered.
export default {
methods: {
open6() {
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
cancelButtonText: 'Discard Changes'
})
.then(() => {
this.$message({
type: 'info',
message: 'Changes saved. Proceeding to a new route.'
});
})
.catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? 'Changes discarded. Proceeding to a new route.'
: 'Stay in the current route'
})
});
}
}
}
</script>
```
:::
### Centered content
Content of MessageBox can be centered.
:::demo Setting `center` to `true` will center the content
```html
<template>
<el-button type="text" @click="open7">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open7() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
@@ -384,9 +448,10 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
| type | message type, used for icon display | string | success / info / warning / error | — |
| iconClass | custom icon's class, overrides `type` | string | — | — |
| customClass | custom class name for MessageBox | string | — | — |
| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
| 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 |
| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
| beforeClose | 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 | — | — |
| distinguishCancelAndClose | whether to distinguish canceling and closing the MessageBox | boolean | — | false |
| lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
| showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
| showConfirmButton | whether to show a confirm button | boolean | — | true |