zydx-plus/src/components/tipBox/index.js

Vue.js

import { createVNode, render } from 'vue'
import XtxConfirm from './src/main.vue'

// 准备div容器
const divNode = createVNode('div', { class: 'xtx-confirm-container' })
render(divNode, document.body)
// 获取 DOM 节点, 用于挂载组件或卸载组件
const container = divNode.el

// 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
const Confirm = ({ type, url ,title,radioArr,checkboxArr,submitText,cancelText,closeShow, promptContent, middle, cancelShow, inputArr, countdown }) => {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        // 2. 点击确认按钮，触发resolve同时销毁组件
        const submit = () => {
            let val = []
            if(type === 'input') {
                for(let i=0; i< inputArr.length; i++) {
                    if(inputArr[i].type === 'select') {
                        val.push(inputArr[i].selectValue)
                    } else {
                        if(inputArr[i].type === 'textarea'){
                            inputArr[i].value = XtxConfirm.methods.getTextareaContent()
                        }
                        val.push((inputArr[i].value)?inputArr[i].value:'')
                    }
                }
            }
            if(type === 'radio') {
                for(let i=0; i< radioArr.length; i++) {
                    if(radioArr[i].checked) {
                        val.push(radioArr[i].value)
                    }
                }
            }
            if(type === 'checkbox') {
                for(let i=0; i< checkboxArr.length; i++) {
                    if(checkboxArr[i].checked) {
                        val.push(checkboxArr[i].value)
                    }
                }
            }
            render(null, container)
            resolve(val)
        }
        // 3. 点击取消按钮，触发reject同时销毁组件
        const cancel = () => {
            render(null, container)
            reject('点击取消')
        }
        const close = () => {
            render(null, container)
        }
        // 1. 创建 XtxConfirm 组件
        const VNode = createVNode(XtxConfirm, { type, url ,title, submitText, cancelText, closeShow,promptContent,radioArr,checkboxArr, middle, cancelShow, inputArr,countdown, submit, cancel, close })
        render(VNode, container)
    })
}
export default Confirm