<template> <div class="mk-toast"> <transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')"> <div v-if="showing" class="body _acrylic" :style="{ zIndex }"> <div class="message"> {{ message }} </div> </div> </transition> </div> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue'; import * as os from '@/os'; defineProps<{ message: string; }>(); const emit = defineEmits<{ (e: 'closed'): void; }>(); const showing = ref(true); const zIndex = os.claimZIndex('high'); onMounted(() => { window.setTimeout(() => { showing.value = false; }, 4000); }); </script> <style lang="scss" scoped> .toast-enter-active, .toast-leave-active { transition: opacity 0.3s, transform 0.3s !important; } .toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(-100%); } .mk-toast { > .body { position: fixed; left: 0; right: 0; top: 0; margin: 0 auto; margin-top: 16px; min-width: 300px; max-width: calc(100% - 32px); width: min-content; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: clip; text-align: center; pointer-events: none; > .message { padding: 16px 24px; } } } </style>