Vue3使用VueSweetalert2调用Swal.fire后重复生成隐藏div的问题求助

问题根源 #

VueSweetalert2默认每次调用fire()都会新建弹窗容器，关闭弹窗后不会自动清理旧容器，导致这些隐藏的.swal2-container div不断积累。

可行解决方案 #

1. 调用弹窗前先关闭旧实例 #

每次触发新弹窗前，先调用this.$swal.close()销毁所有已存在的弹窗容器，确保只保留最新的一个：

.then(response => {
    // 先清理旧弹窗
    this.$swal.close();
    if(response.status){
        this.$swal.fire({
            text: response.message || 'Success',
            icon:'success',
        })
    }
    else{
        this.$swal.fire({
            text: response.message || 'Error',
            icon:'error',
        })
    }
})

2. 开启全局单例模式 #

在注册VueSweetalert2插件时配置单例模式，强制同一时间只存在一个弹窗实例，自动清理旧容器：

// main.js 中的插件注册代码
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

const app = createApp(App);
app.use(VueSweetalert2, {
    // 开启单例，自动关闭之前的弹窗
    allowEscapeKey: true, // 可根据需求调整其他配置
    didOpen: () => {
        // 兜底清理：如果还有残留容器，只保留最后一个
        const allModals = document.querySelectorAll('.swal2-container');
        if (allModals.length > 1) {
            Array.from(allModals).slice(0, -1).forEach(modal => modal.remove());
        }
    }
});

3. 弹窗关闭后手动清理DOM #

如果前两种方法仍有残留，可以在弹窗关闭回调里手动移除多余容器：

this.$swal.fire({
    text: response.message || 'Success',
    icon:'success',
}).then(() => {
    const modals = document.querySelectorAll('.swal2-container');
    while (modals.length > 1) {
        modals[0].remove();
    }
})

内容的提问来源于stack exchange，提问作者Maulik