misskey/src/client/components/modal.vue

85 lines
1.5 KiB
Vue
Raw Normal View History

<template>
<div class="mk-modal">
<transition name="bg-fade" appear>
<div class="bg" ref="bg" v-if="show" @click="close()"></div>
</transition>
<transition name="modal" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
<div class="content" ref="content" v-if="show" @click.self="close()"><slot></slot></div>
</transition>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
},
data() {
return {
show: true,
};
},
methods: {
close() {
this.show = false;
(this.$refs.bg as any).style.pointerEvents = 'none';
(this.$refs.content as any).style.pointerEvents = 'none';
}
}
});
</script>
<style lang="scss" scoped>
.modal-enter-active, .modal-leave-active {
transition: opacity 0.3s, transform 0.3s !important;
}
.modal-enter, .modal-leave-to {
opacity: 0;
transform: scale(0.9);
}
.bg-fade-enter-active, .bg-fade-leave-active {
transition: opacity 0.3s !important;
}
.bg-fade-enter, .bg-fade-leave-to {
opacity: 0;
}
.mk-modal {
> .bg {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
background: var(--modalBg)
}
> .content {
position: fixed;
z-index: 10000;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: calc(100% - 16px);
max-height: calc(100% - 16px);
overflow: auto;
margin: auto;
::v-deep > * {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
}
}
}
</style>