Modal.vue

<style lang="less">
    .modal{
        opacity: 0;
        display: none;
        transition: all 0.3s;
    }
    .modalActive{
        opacity: 1;
        display: block;
    }
    .modal>.content,.modal_active>.content{
        position: absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background: rgba(0, 0, 0, 0.5);
        z-index:999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<template>
    <div :class="showModal ? 'modal modalActive' : 'modal'">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Util from '@/libs/util.js'

export default {
  name: 'Modal',
  
  data () {
    return {
        
    }
  },
  props:{
    showModal: {
        type: Boolean,
        default: false
    },
  },
  async mounted(){
    window.d = this;

  },
  methods:{
    
  },
  components:{

  },
}
</script>