4dkankan-components/packages/components/basic/dialog/src/toast.vue

<template>
    <teleport to="body">
        <transition name="slide-down" mode="out-in" appear>
            <div class="ui-toast" :style="{ zIndex: zIndex }" v-if="show">
                <div class="ui-toast__box" :class="[type]">
                    <i v-if="type !== 'fixed' && type" class="icon"></i>
                    <div class="ui-toast__msg" v-html="content"></div>
                    <i class="iconfont icon-close close" @click="close" v-if="showClose"></i>
                </div>
            </div>
        </transition>
    </teleport>
</template>
<script lang="ts">
import { defineComponent, nextTick, ref } from 'vue'
import { useZIndex } from '@kankan/hooks'
const { currentZIndex } = useZIndex()

export default defineComponent({
    name: 'UIToast',
    props: {
        type: String,
        delay: Number,
        content: String,
        destroy: Function,
        close: Function,
        showClose: Boolean,
    },
    setup: function (props, _) {
        const show = ref(true)
        const close = () => {
            show.value = false
            nextTick(() => {
                if (typeof props.close == 'function') {
                    props.close()
                }
                typeof props.destroy === 'function' && props.destroy()
            })
        }

        if (props.type !== 'fixed') {
            setTimeout(() => close(), props.delay || 3000)
        }
        return {
            show,
            // type: props.type,
            // close,
            // content: props.content,
            zIndex: currentZIndex,
        }
    },
})
</script>
<style scoped>
.slide-down-enter-active,
.slide-down-leave-active {
    will-change: transform;
    transition: all 0.35s ease-in-out;
}
.slide-down-enter-from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}
.slide-down-enter {
    opacity: 1;
    transform: translate3d(-50%, 100%, 0);
}
.slide-down-leave-active {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}
</style>