22 lines
739 B
Vue
22 lines
739 B
Vue
<script setup>
|
|
import { useToast } from '@/composables/useToast'
|
|
const { state } = useToast()
|
|
</script>
|
|
<template>
|
|
<teleport to="body">
|
|
<div class="fixed top-2 left-0 right-0 z-50 flex flex-col items-center gap-2 pointer-events-none">
|
|
<transition-group name="toast">
|
|
<div v-for="t in state.list" :key="t.id"
|
|
class="px-4 py-2 rounded-full text-sm shadow-card"
|
|
:class="t.type==='error' ? 'bg-danger text-white' : 'bg-neutral-800/90 text-white'">
|
|
{{ t.msg }}
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</teleport>
|
|
</template>
|
|
<style>
|
|
.toast-enter-active,.toast-leave-active{transition:all .25s ease}
|
|
.toast-enter-from,.toast-leave-to{opacity:0;transform:translateY(-8px)}
|
|
</style>
|