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

vue3-js版组件库

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

const confirm = (args) => {
    return new Promise((resolve, reject) => {
        let options = null
        if (Object.prototype.toString.call(args) === '[object String]') {
            options = { content: args }
        } else if (Object.prototype.toString.call(args) === '[object Object]') {
            options = { ...args }
        } else {
            toast('传参格式错误')
            reject('confirm传参格式错误')
            return false
        }
        const props = {
            ...options,
            visible: false,
            close: () => {
                vm.component.props.visible = false
                close(el, container)
                resolve('close')
                return true // 接收消息的函数必须返回true，要不然vue会有警告,具体原因不清楚
            },
            cancel: () => {
                vm.component.props.visible = false
                close(el, container)
                resolve('cancel')
                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 confirm