vue封装公共弹窗删除业务组件支持.then.catch调用

业务是这样的：

一个中台管理系统，每个删除点击后都弹出弹窗，需要输入密码进行验证，输入正确，则可以删除，输入错误则提示错误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（）的功能。

写在最后

欢迎大家访问我的个人笔记与个人空间

• 个人笔记
• 个人空间

干净又卫生兄弟们~