new C'hnages

resources/js/vue/components/modal/Base.vue

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