<template>
|
<transition name="maskAnimate">
|
<div v-show="visible" class="dialog-box" @click="closeModal">
|
<transition name="zoomAnimate">
|
<div v-show="visible" class="dialog-box-slot">
|
<slot />
|
</div>
|
</transition>
|
</div>
|
</transition>
|
</template>
|
|
<script>
|
export default {
|
name: "Dialog",
|
props: ['visible'],
|
methods: {
|
closeModal() {
|
this.$emit('update:visible', false);
|
}
|
},
|
watch: {
|
},
|
mounted() {
|
},
|
destroyed() {
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.dialog-box {
|
z-index: 9999;
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
background-color: rgba(0, 0, 0, .5);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.dialog-box-slot {
|
background-color: #002244;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
}
|
|
.zoomAnimate-enter-active {
|
animation: bounceIn 0.5s;
|
}
|
|
.zoomAnimate-leave-active {
|
animation: bounceOut 0.2s;
|
}
|
|
.maskAnimate-enter-active {
|
animation: fadeIn 0.5s;
|
}
|
|
.maskAnimate-leave-active {
|
animation: fadeOut 0.2s;
|
}
|
</style>
|
