ElemeFE / ElemeFE/element

[Feature Request] 【el-dialog】鼠标放在弹窗上空白区域,按下鼠标左键,然后移到弹窗外松开鼠标,窗口就会关掉

Open
#20,088 1 comment 0 reactions 0 assignees View on GitHub
stale
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Existing Component

### Component Name
el-dialog

### Description
鼠标放在弹窗上空白区域,按下鼠标左键,然后移到弹窗外松开鼠标,窗口就会关掉
临时处理方式:
```

import ElDialog from 'element-ui/lib/dialog'

export default {
name: 'UiDialog',
extends: ElDialog,
props: {
height: String,
closeOnClickModal: {
type: Boolean,
default: true
}
},
data() {
return {
oncloseClickModal: false
}
},
computed: {
style() {
const style = {}
if (this.width) {
style.width = this.width
}
if (this.height) {
style.height = this.height
}
if (!this.fullscreen) {
// style.marginTop = this.top
}
return style
}
},
mounted() {
// extends 会先执行原组件的 mounted(),再执行扩展组件的 mounted()
// fix bug 鼠标放在弹窗上空白区域,按下鼠标左键,然后移到弹窗外松开鼠标,窗口就会关掉
this.oncloseClickModal = this.closeOnClickModal
this.$el.firstChild.addEventListener('mouseenter', event => {
this.oncloseClickModal = true
// event.stopPropagation()
})
this.$el.firstChild.addEventListener('mousedown', event => {
this.oncloseClickModal = false
// event.stopPropagation()
})
this.$el.firstChild.addEventListener('mouseup', event => {
this.oncloseClickModal = true
// event.stopPropagation()
})
},
methods: {
// 覆盖原组件的同名 methods
handleWrapperClick(event) {
// fix bug 鼠标放在弹窗上空白区域,按下鼠标左键,然后移到弹窗外松开鼠标,窗口就会关掉
if (!this.oncloseClickModal) {
this.oncloseClickModal = this.closeOnClickModal
return
}
this.handleClose()
}
}
}

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.