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

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

<script setup lang="ts">
// import getZindex from '../../utils/zindex'
import { defineProps, nextTick, onMounted, ref } from 'vue'
import { useZIndex } from '@kankan/hooks'
import uiIcon from '../icon'
const { currentZIndex } = useZIndex()

const props = defineProps({
    msg: {
        type: String,
    },
    type: {
        type: String,
    },
    time: {
        type: Number,
    },
    destroy: {
        type: Function,
    },
    index: {},
})
const zIndex = currentZIndex
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>