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

vue3-js版组件库

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

const alert = (opt) => {
    return new Promise((resolve, reject) => {
        const props = {
            ...opt,
            visible: false,
            close: () => {
                vm.component.props.visible = false
                close(el, container)
                resolve('close')
                return true
            },
            confirm: () => {
                vm.component.props.visible = false
                close(el, container)
                resolve('confirm')
                return true
            }
        }

        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(() => vm.component.props.visible = true, 20)
    })
}

function close(el, container) {
    let op = 10
    const ani = setInterval(() => {
        if (op === 0) {
            clearInterval(ani)
            $render(null, container)
        }
        el.style.opacity = op / 10
        op--
    }, 20)
}

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

export default alert