magiccube-vue3/package/components/message/toast/index.js

vue3-js版组件库

import { createVNode, render as $render } from 'vue'
import script from './Component'
import store from '../../../utils/store'

const toast = (opt) => {
    return new Promise((resolve) => {
        let props = {
            duration: 1500,
            content: '',
        }

        if (typeof opt === 'string') {
            props.content = opt
        } else {
            props = { ...props, ...opt }
        }

        const container = document.createElement('div')
        const vm = createVNode(script, props)
        $render(vm, container)

        const el = container.firstElementChild
        const state = store.getState()
        let target = document.body
        if (state.teleportName) {
            target = document.querySelector(`#${state.teleportName}`) || document.querySelector(`.${state.teleportName}`) || document.body
        }
        target.appendChild(el)
        animateToVisible(el)

        setTimeout(() => {
            animateToHidden ? animateToHidden(el) : el.parentNode.removeChild(el)
            resolve()
        }, props.duration)
    })
}

function animateToVisible(el) {
    let op = 0
    const ani = setInterval(() => {
        if (op === 10) clearInterval(ani)
        el.style.opacity = op / 10
        op++
    }, 20)
}

function animateToHidden(el, cb) {
    let op = 10
    const ani = setInterval(() => {
        if (op === 0) {
            clearInterval(ani)
            el.parentNode.removeChild(el)
        }
        el.style.opacity = op / 10
        op--
    }, 20)
}

export default toast