48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<template>
|
|
<div class="modal is-active" @click="doClick">
|
|
<div class="modal-background" :style="`opacity:${count===0? 0.7 : 0.3} !important;'`"></div>
|
|
<div class="modal-card" :id="docid" :style="$store.state.ismobile? '' : `width:${width? width : '60%'}`">
|
|
<header class="modal-card-head my-0 pt-4 pb-3" v-if="title">
|
|
<p class="modal-card-title fsb-20 py-0 my-0" v-html="title"></p>
|
|
</header>
|
|
<section class="modal-card-body" :style="`min-height:${height? height : '700px'}`">
|
|
<component :is="compobj" v-bind="vbind" @modalevent="modalEvent" @close="$emit('close')"></component>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['component', 'width', 'height', 'vbind', 'title'],
|
|
data() {
|
|
return {
|
|
docid: this.$id(),
|
|
count: 0
|
|
}
|
|
},
|
|
created() {
|
|
window.addEventListener('keydown', (e) => {if(e.key==='Escape') this.$emit('close')})
|
|
const collection = document.getElementsByClassName("modal-background")
|
|
this.count = collection.length
|
|
},
|
|
computed: {
|
|
compobj() {
|
|
return () => import(`@/components/${this.component}`)
|
|
}
|
|
},
|
|
methods: {
|
|
modalEvent(ev) {
|
|
this.$emit(ev.name, ev.data)
|
|
},
|
|
doClick(e) {
|
|
//e.stopPropagation()
|
|
if(!e.srcElement.offsetParent) return
|
|
if(document.getElementById(this.docid)) {
|
|
if(!document.getElementById(this.docid).contains(e.target)) {
|
|
this.$emit('close')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |