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