47 lines
923 B
Vue
47 lines
923 B
Vue
|
<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>
|