mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(modal): maskClosable

Browse Source
This commit is contained in:
07akioni 2019-08-28 10:59:38 +08:00
parent 42c4b09535
commit 58948785e7
1 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/common/Modal/src/main.vue
View File

@ -4,12 +4,10 @@ import NModalContent from './ModalContent'
import detachable from '../../../mixins/detachable'
import zindexable from '../../../mixins/zindexable'
import toggleable from '../../../mixins/toggleable'
export default {
name: 'NModal',
mixins: [
toggleable,
detachable,
zindexable
],
@ -19,6 +17,14 @@ export default {
return e instanceof MouseEvent
},
default: null
},
value: {
type: Boolean,
default: false
},
maskClosable: {
type: Boolean,
default: false
}
},
data () {
@ -26,6 +32,11 @@ export default {
mousedownTarget: null
}
},
methods: {
deactivate () {
this.$emit('input', false)
}
},
render (h) {
return h('div', {
staticClass: 'n-modal-activator',
@ -36,17 +47,17 @@ export default {
staticClass: 'n-modal-container',
ref: 'contentContainer',
class: {
'n-modal-container--active': this.active
'n-modal-container--active': this.value
}
},
[
h(NModalOverlay, {
props: { active: this.active }
props: { active: this.value }
}),
h(NModalContent,
{
ref: 'content',
props: { active: this.active, activateEvent: this.activateEvent },
props: { active: this.value, activateEvent: this.activateEvent },
on: {
mousedown: (e) => {
this.mousedownTarget = e.target
@ -55,11 +66,13 @@ export default {
const slotDOM = this.$refs.content.slotDOM
const scollbars = this.$refs.content.$el.querySelectorAll('.n-scrollbar-rail__scrollbar')
const elsToAvoid = [...slotDOM, ...scollbars]
if (
!elsToAvoid.some(el => el.contains(e.target)) &&
!elsToAvoid.some(el => el.contains(this.mousedownTarget))
) {
this.deactivate()
if (this.maskClosable) {
if (
!elsToAvoid.some(el => el.contains(e.target)) &&
!elsToAvoid.some(el => el.contains(this.mousedownTarget))
) {
this.deactivate()
}
}
}
}