[JavaScript知识库]封装一个全局使用的二次确认弹窗

背景：
如图所示，在项目中进行删除、取消、停用等等操作的时候，出于考虑误操作等，我们通常会需要用户进行二次确认，然后再进行操作。对于这种使用比较多的公共功能，我们如何才能保持一致并且简单的使用呢？出于这些考虑，我们选择封装一个全局的二次弹窗组件。
分析：
对于上述的弹窗，标题、提示内容，以及确定的方法都是不相同的，因此组件需要动态接收这些参数。
实现步骤：
1、首先封装一个弹窗组件ConfirmBox
这里采用Vuetify的弹窗组件v-dialog来进行二次封装。
组件template如下：

<template>
    <v-dialog v-model="show" width="480px" persistent>
        <v-card>
            <v-card-title>{{ title }}</v-card-title>
            <v-divider></v-divider>
            <v-card-text class="d-flex align-center flex-column py-9 ">
                <div class="d-flex align-center">
                    <v-icon size="24px" color="#FAAD14" class="mr-4">{{ $icon.mdiAlertCircle }}</v-icon>
                    <span v-if="content">{{ content }}</span>
                </div>
                <div v-if="options.subContent" style="font-size:12px;" v-html="options.subContent"></div>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions class="d-flex align-center justify-center px-3 py-4">
                <div v-if="options.extraBtns && options.extraBtns.length > 0">
                    <v-btn v-for="(item, index) in options.extraBtns" :key="index" depressed color="primary" @click="handleClick(item)">
                        {{ item.text }}
                    </v-btn>
                </div>
                <v-btn depressed class="ml-6" min-width="72" :loading="confirming" color="primary" @click="sure">{{ options.sureBtnName || '确定' }}</v-btn>
                <v-btn v-if="!options.hideCancel" depressed min-width="72" @click="cancel">取消</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

逻辑如下：

<script>
export default {
    name: 'ConfirmBox',
    data() {
        return {
            title: '',
            content: '',
            sureBtnName: '',
            params: null,
            promiseStatus: null,
            show: false,
            confirming: false,
            hideCancel: false
        };
    },
    methods: {
        handleClick(item) {
            this[item.method](item);
        },
        async sure() {
            if (this.confirmFunc) {
                this.confirming = true;
                try {
                    await this.confirmFunc();
                } catch (e) {
                    this.confirming = false;
                    console.log(e);
                    return;
                }
                this.confirming = false;
            }
            this.show = false;
            this.promiseStatus && this.promiseStatus.resolve();
        },
        cancel() {
            this.show = false;
            this.promiseStatus && this.promiseStatus.reject();
        },
        confirm() {
            this.show = true;
            return new Promise((resolve, reject) => {
                this.promiseStatus = {
                    resolve: resolve,
                    reject: reject
                };
            });
        }
    }
};
</script>

其中options作为拓展，如果有别的一些按钮需要加入，可以进行传参。
2、公共方法$confirm封装

import Vue from 'vue';
import vuetify from './vuetify';
import Confirm from '@/components/common/ConfirmBox';
const ConfirmBox = Vue.extend(Confirm);

Vue.use({
    install: function(Vue) {
        // 新增一个options对象
        Vue.prototype.$confirm = (title, content, confirmFunc, options = {}) => {
            const instance = new ConfirmBox({
                data: {
                    title: title,
                    content: content,
                    // sureBtnName: sureBtnName,
                    confirmFunc: confirmFunc,
                    // hideCancel: hideCancel,
                    options: options
                },
                vuetify
            }).$mount();
            document.getElementById('app').appendChild(instance.$el);
            return instance.confirm();
        };
    }
});

注：这里的app是整个页面。
使用:
在自定义函数里

await this.$confirm('删除', '确认删除该账号？');
// 需要进行的操作
......

如果需要reject进行操作，可以这样写：

this.$confirm('XXXX',async()=>{}).catch(e=>{
	//自定义操作
	......
})