github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: modal component transition 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-16 12:39:35 +08:00
parent 22a558bf67
commit 49705b6a80
1 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/base/modal/Modal.vue
View File

@ -41,25 +41,37 @@ function handleClose() {
</script> </script>
<template> <template>
<Teleport to="body"> <Teleport to="body">
<transition <div
enter-active-class="ease-out" :class="wrapperClasses"
enter-from-class="opacity-0" aria-modal="true"
enter-to-class="opacity-100" class="modal-wrapper"
leave-active-class="ease-in" role="dialog"
leave-from-class="opacity-100" tabindex="0"
leave-to-class="opacity-0" @keyup.esc="handleClose()"
> >
<div <transition
v-show="visible" enter-active-class="ease-out duration-200"
:class="wrapperClasses" enter-from-class="opacity-0"
aria-modal="true" enter-to-class="opacity-100"
class="modal-wrapper transform transition-all duration-200" leave-active-class="ease-in duration-100"
role="dialog" leave-from-class="opacity-100"
tabindex="0" leave-to-class="opacity-0"
@keyup.esc="handleClose()"
> >
<div class="modal-layer" @click="handleClose()" /> <div v-show="visible" class="modal-layer" @click="handleClose()" />
<div :style="contentStyles" class="modal-content"> </transition>
<transition
enter-active-class="ease-out duration-200"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-100"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div
v-show="visible"
:style="contentStyles"
class="modal-content transform transition-all"
>
<div class="modal-header"> <div class="modal-header">
<div class="modal-header-title">{{ title }}</div> <div class="modal-header-title">{{ title }}</div>
<div class="modal-header-actions"> <div class="modal-header-actions">
@ -75,8 +87,8 @@ function handleClose() {
<slot name="footer" /> <slot name="footer" />
</div> </div>
</div> </div>
</div> </transition>
</transition> </div>
</Teleport> </Teleport>
</template> </template>
@ -94,8 +106,9 @@ function handleClose() {
@apply absolute; @apply absolute;
@apply top-0 left-0; @apply top-0 left-0;
@apply w-full h-full; @apply w-full h-full;
background: #9e9eaa; @apply transition-opacity;
opacity: 0.6; @apply bg-gray-500;
@apply bg-opacity-75;
} }
.modal-content { .modal-content {