业务是这样的：
一个中台管理系统，每个删除点击后都弹出弹窗，需要输入密码进行验证，输入正确，则可以删除，输入错误则提示错误message。
效果如下
之前我的做法是封装一个公共的组件，然后需要调用的页面需要引入该组件，然后打开弹窗时通过
this.$refs.xxx.open(id)打开弹窗，通过给open事传id后；
公共组件在进行业务上的校验，最后通过$emit去触发告知父组件是否验证通过，父组件在进行相应的业务操作。
但是上面的操作，就非常麻烦，不够便捷。
于是我想到了可不可以实现的类似于element-ui的this.$confirm弹窗一样，支持.then.catch调用呢，这样就会省下很多麻烦的步骤。
于是从promise上下手，我们在打开弹窗的时候需要 return 一个Promise，重写业务上提交按钮方法，进行校验，代码如下：
open(val) {
this.reset();
this.diagoOpen = true;
return new Promise((resolve, reject) => {
//重写submitForm方法
this.submitForm = () => {
this.$refs["form"].validate(async (valid) => {
if (valid) {
await this.delete(); //等待返回值也就是密码正确后再resolve出去，调用的组件可使用.then方法
resolve();
}
});
};
//可扩展-> 当弹窗关闭时重写关闭方法并reject出去，被调用的组件.catch接收
});
},
/** 提交按钮 */
submitForm() {
},
调用时
在调用的时候，由于返回了一个promise，并且重写了submitForm提交按钮的方法，所以可以链式.then.catch了。
- then方法表示，业务上校验密码通过，可以进行删除
- catch表示未通过，并做出相应的业务代码操作…
实现代码如下：
delGroup(val) {
this.$refs.CompDelte.open()//打开公共弹窗的open方法
.then((res) => {
//表示业务校验通过
this.deleteGroup(val.row.groupId);//进行删除操作
});
},
注意：这些都是伪代码，并非全部的代码，只是说一下我实现的思路。
优化
我们也可以把该组件，挂载全局组件上，或者将方法挂载原型上。
也可以使用Vue.use()做进一步拓展
从而实现类似 this.$confirm（）的功能。
写在最后
欢迎大家访问我的个人笔记与个人空间
干净又卫生兄弟们~