Base Login

components/Modal.vue

@@ -0,0 +1,48 @@
+<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>