4dkankan-components/packages/components/basic/message/message.vue

<template>
    <teleport to="body">
        <transition name="fade">
            <div class="ui-message" :style="{ zIndex: zIndex, marginTop: `${index.value * 60}px` }" :class="type" v-if="show">
                <ui-icon :type="icons[type]" class="icon" />
                <p>{{ msg }}</p>
            </div>
        </transition>
    </teleport>
</template>

<script setup>
import uiIcon from '../icon'
import getZindex from '../../utils/zindex'
import { defineProps, onMounted, ref, nextTick } from 'vue'

const props = defineProps({
    msg: {
        type: String,
    },
    type: {
        type: String,
    },
    time: {
        type: Number,
    },
    destroy: {
        type: Function,
    },
    index: {},
})
const zIndex = getZindex()
const icons = {
    success: 'state_s',
    warning: 'state_e',
    error: 'state_f',
}
const show = ref(false)

if (props.time) {
    setTimeout(() => {
        show.value = false
        setTimeout(props.destroy, 500)
    }, props.time)
}

onMounted(() => nextTick(() => (show.value = true)))
</script>

<script>
export default { name: 'UiMessage' }
</script>