vue3封装自定义确认弹窗组件

第一步：封装弹窗组件，定义Props，即可根据传入的props实现内容、样式等自定义。

----Confrim.vue （部分）

<template>
<div class="pageMask">
    <div class="corfirmFrame">
        <div class="close" @click="closeCallback" v-if="!noNeedClose">
            <img src="@/assets/icons/Close.svg" />
        </div>
        <div class="title" :class="titlePos ? titlePos : ''" v-if="title">
            {{ title }}
        </div>
        <div class="artical">
            {{ text }}
        </div>
        <div class="twoButton" :class="buttonPos ? buttonPos : ''">
            <div class="cancel subBtn" @click="cancelCallback">
                {{ lButton }}
            </div>
            <div class="button mainBtn" @click="submitCallback">
                {{ rButton }}
            </div>
        </div>
    </div>
</div>
</template>
<script setup lang="ts">
defineProps([
'title',
'text',
'titlePos',
'submitCallback',
'cancelCallback',
'buttonPos',
'lButton',
'rButton',
'closeCallback',
'noNeedClose',
]);
</script>

第二步：封装方法，渲染刚封装好的组件。

----dialogue.ts （部分）

import { createVNode, render } from 'vue'
import MyConfirm from '@/components/Confirm/confirm.vue'

// 任何弹出的组件都放在这一个div身上
const div = document.createElement('div');
div.setAttribute('class', 'pop-container');
document.body.appendChild(div);

export const confirm = (obj:confirmObj) => {
    return new Promise((resolve, reject) => {
        const closeCallback = () => {
            if(obj.closeCallback)obj.closeCallback();
            render(null, div);
        }
        const submitCallback = () => {
            render(null, div);
            resolve('点击了确认');
        }
        const cancelCallback = () => {
            render(null, div);
            reject('点击取消');
        }
    const vnode = createVNode(MyConfirm, 
    { 
        title:obj.title||'', 
        text:obj.text, 
        titlePos:obj.titlePos,
        buttonPos:obj.buttonPos,
        lButton:obj.lButton, 
        rButton:obj.rButton,
        closeCallback, submitCallback, cancelCallback, noNeedClose:obj.noNeedClose||'' ,
    });
    render(vnode, div);
    })
}

第三步：调用方法，传入具体的props。

import { confirm } from '@/utils/dialogue';

confirm({
    text: ‘你确定你确定吗’,
    lButton: '取消',
    rButton: '确认呢',
    closeCallback: function () {
        console.log('关闭按钮');
    }
}).then(() => {
        //点了确认的逻辑
    })
    .catch(() => {
        console.log('取消');
    });