自定义函数式弹框组件

以vue3 为例

import { createApp } from "vue";
import messageBox from './messageBox.vue' // 弹框组件

export function showMsgToast(title='', content, option = {}){
    const div = document.createElement('div')
    document.body.append(div)
    const app = createApp(messageBox, {
        title,
        content,
        ...option,
        onClose(){
            app.unmount();div.remove()
        },
    })
    app.mount(div)
}

使用方式

howMsgToast('提示a','wqwqwwqqw', {

     onConfirm: () => { console.log('---onConfirm')},
     onCloseAfter: () => { console.log('---oncloseAfter')}

})