feat: prevent close dialog/drawer when cursor dragging from body to mask

pull/20960/head
netcon 2021-04-23 15:33:46 +08:00
parent 17de41f3e2
commit 145570ff88
2 changed files with 18 additions and 7 deletions

View File

@ -6,6 +6,7 @@
<div
v-show="visible"
class="el-dialog__wrapper"
@mousedown="clickStartElement = $event.target"
@click.self="handleWrapperClick">
<div
role="dialog"
@ -113,7 +114,8 @@
data() {
return {
closed: false,
key: 0
key: 0,
clickStartElement: null
};
},
@ -162,9 +164,13 @@
}
};
},
handleWrapperClick() {
if (!this.closeOnClickModal) return;
this.handleClose();
handleWrapperClick(event) {
if (
this.closeOnClickModal &&
(!this.clickStartElement || this.clickStartElement.contains(event.target))
) {
this.handleClose();
}
},
handleClose() {
if (typeof this.beforeClose === 'function') {

View File

@ -10,6 +10,7 @@
<div
class="el-drawer__container"
:class="visible && 'el-drawer__open'"
@mousedown="clickStartElement = $event.target"
@click.self="handleWrapperClick"
role="document"
tabindex="-1">
@ -123,7 +124,8 @@ export default {
data() {
return {
closed: false,
prevActiveElement: null
prevActiveElement: null,
clickStartElement: null
};
},
watch: {
@ -162,8 +164,11 @@ export default {
this.closed = true;
}
},
handleWrapperClick() {
if (this.wrapperClosable) {
handleWrapperClick(event) {
if (
this.wrapperClosable &&
(!this.clickStartElement || this.clickStartElement.contains(event.target))
) {
this.closeDrawer();
}
},