modal animation
This commit is contained in:
@@ -1,11 +1,12 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
teleport(:to="appContainer", v-if="value")
|
teleport(:to="appContainer")
|
||||||
.base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay")
|
transition
|
||||||
.base-content(v-click-outside="clickOutside", :style="styleContent")
|
.base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay", v-if="value")
|
||||||
.base-header
|
.base-content(v-click-outside="clickOutside", :style="styleContent")
|
||||||
.header-title.text {{ title }}
|
.base-header
|
||||||
.icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
|
.header-title.text {{ title }}
|
||||||
slot
|
.icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
|
||||||
|
slot
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -77,4 +78,13 @@ export default {
|
|||||||
margin-right: -11px
|
margin-right: -11px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
color: var(--font-grey-color)
|
color: var(--font-grey-color)
|
||||||
|
|
||||||
|
.v-enter-active,
|
||||||
|
.v-leave-active
|
||||||
|
transition: opacity 0.3s ease-in-out
|
||||||
|
|
||||||
|
|
||||||
|
.v-enter-from,
|
||||||
|
.v-leave-to
|
||||||
|
opacity: 0
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user