56 lines
1.0 KiB
Vue
56 lines
1.0 KiB
Vue
<template>
|
|
<transition name="fade">
|
|
<div
|
|
v-if="visible"
|
|
class="fixed inset-0 bg-black/50 z-40"
|
|
@click.self="close"
|
|
>
|
|
<transition name="slide-up">
|
|
<div
|
|
class="fixed bottom-0 left-0 w-full h-[80vh] bg-white rounded-t-2xl shadow-xl z-50 p-4"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from "vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: Boolean,
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val),
|
|
})
|
|
|
|
function close() {
|
|
visible.value = false
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-up-enter-active,
|
|
.slide-up-leave-active {
|
|
transition: transform 0.25s ease;
|
|
}
|
|
.slide-up-enter-from,
|
|
.slide-up-leave-to {
|
|
transform: translateY(100%);
|
|
}
|
|
</style> |