natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Update modal.vue

This commit is contained in:
syuilo 2020-09-06 10:13:12 +09:00
parent b2d9674627
commit 256307f1a9
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/client/components/modal.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none' }"> <div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none' }">
<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear> <transition :name="$store.state.device.animation ? 'modal-bg' : ''" appear>
<div class="bg _modalBg" v-if="showing" @click="$emit('click')"></div> <div class="bg _modalBg" v-if="showing" @click="$emit('click')"></div>
</transition> </transition>
<div class="content" :class="{ popup, fixed }" @click.self="$emit('click')" ref="content"> <div class="content" :class="{ popup, fixed }" @click.self="$emit('click')" ref="content">
<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="$emit('closed')"> <transition :name="$store.state.device.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="$emit('closed')">
<slot v-if="showing"></slot> <slot v-if="showing"></slot>
</transition> </transition>
</div> </div>
@ -114,20 +114,31 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.modal-enter-active, .modal-leave-active { .modal-bg-enter-active, .modal-bg-leave-active {
transition: opacity 0.3s !important;
}
.modal-bg-enter-from, .modal-bg-leave-to {
opacity: 0;
}
.modal-content-enter-active, .modal-content-leave-active {
transition: opacity 0.3s, transform 0.3s !important; transition: opacity 0.3s, transform 0.3s !important;
} }
.modal-enter-from, .modal-leave-to { .modal-content-enter-from, .modal-content-leave-to {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transform: scale(0.9); transform: scale(0.9);
} }
.bg-fade-enter-active, .bg-fade-leave-active { .modal-popup-content-enter-active, .modal-popup-content-leave-active {
transition: opacity 0.3s !important; transform-origin: center top;
transition: opacity 0.3s, transform 0.3s !important;
} }
.bg-fade-enter-from, .bg-fade-leave-to { .modal-popup-content-enter-from, .modal-popup-content-leave-to {
transform-origin: center top;
pointer-events: none;
opacity: 0; opacity: 0;
transform: scale(0.9);
} }
.mk-modal { .mk-modal {