cssd-back/resources/js/vue/components/modal/Base.vue

<template>
    <transition name="fade">
        <div class="mng-modal" @click="close" v-show="show">
            <transition name="slide">
                <div class="mng-modal-container" :style="{'width':width}" v-if="show" @click.stop>
                    <slot>this is sample content</slot>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    props: ["show", "width"],
    methods: {
        close: function() {
            this.$emit("close");
        }
    },
    mounted: function() {
        document.addEventListener("keydown", e => {
            if (this.show && e.keyCode == 27) {
                this.close();
            }
        });
    }
};
</script>

<style lang="scss">
.mng-modal {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10000001;
}

.mng-modal-container {
    margin: 30px auto;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .15s linear;
    -webkit-transition: opacity .15s linear;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.slide-enter,
.slide-leave-to {
    -webkit-transform: translate(0, -35%);
    -ms-transform: translate(0, -35%);
    -o-transform: translate(0, -35%);
    transform: translate(0, -35%);
}

.slide-enter-active,
.slide-leave-active {
    transition: transform .3s ease-out;
}

.slide-enter-to,
.slide-leave {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
</style>