<script setup> import MessageContent from './message/index.vue' import { ref } from 'vue' const visible = ref(false) const messageText = ref('') const messageType = ref('') const emit = defineEmits(['after-leave']) const showMessage = ({ type = 'warning', message, duration = 2000 }) => { messageText.value = message messageType.value = type visible.value = true setTimeout(() => { visible.value = false }, duration) } defineExpose({ showMessage }) </script> <template> <transition name="fade" @after-leave="$emit('after-leave')" > <MessageContent v-if="visible" :text="messageText" :type="messageType" class="fixed top-20px left-1/2 -translate-x-1/2 z-9999" /> </transition> </template> <style lang="scss" scoped> .fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style>