51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
interface Props {
|
|
isOpen: boolean
|
|
contentText: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
isOpen: false,
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const isVisible = ref(false)
|
|
|
|
watch(
|
|
() => props.isOpen,
|
|
newVal => {
|
|
if (newVal) {
|
|
isVisible.value = true
|
|
|
|
setTimeout(() => {
|
|
isVisible.value = false
|
|
emit('close')
|
|
}, 2000)
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<div v-if="isVisible" class="toast-container">
|
|
<p class="toast-text">
|
|
{{ contentText }}
|
|
</p>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.toast-container {
|
|
@apply fixed left-1/2 max-w-[328px] py-3 px-6 rounded-[8px] bg-[rgba(85,85,85,0.4)] backdrop-blur-[25px] -translate-x-1/2 bottom-[20px] md:bottom-[40px] z-[800]
|
|
before:content-[''] before:absolute before:inset-0 before:border before:border-white/10 before:rounded-[8px];
|
|
}
|
|
.toast-text {
|
|
@apply text-center text-[16px] text-white leading-[26px] tracking-[-0.48px];
|
|
}
|
|
</style>
|