更加优雅的使用二次确认框

前言

项目开发中我们经常会使用到二次确认框，在项目中大家往往都会像下面这样去写：

上面的代码确实可以实现我们的功能逻辑，但是大家有没有思考过，如果别的地方又出现了类似的功能逻辑，是不是又要复制一变改改去实现，这样会使的冗余代码过多，后期项目维护的成本高。

优化

将我们的confirm框抽离成一个公共的方法，代码如下：

/**
 * 二次确认
 * @param {*} options
 */
export function Confirm(options = {}) {
  let option = Object.assign(
    {
      message: "确认提交表单吗？",
      center: true,
      showClose: false,
    },
    options
  );
  return (target, name, descriptor) => {
    var old_fn = descriptor.value;
    descriptor.value = function (...args) {
      MessageBox.confirm(option.message, option.title, option)
        .then(() => {
          old_fn.apply(this, args);
        })
        .catch(() => {
          // on cancel
        });
    };
    return descriptor;
  };
}

接下来我们只要在我们对应的业务方法中直接去使用这个Confirm方法就可以了，代码如下：

    @Confirm({ message: "确认删除改模板吗" })
    async delModel(modelId) {
      await modelDelete({ modelId });
      this.getList();
      this.$message({
        message: "删除成功",
        type: "success",
      });
    }

经过这样的优化后，以后使用直接在方法上使用@Confirm方法，无需在重复的去写上面例子中的代码，这样对我们的项目中冗余代码就会大大减少。

最后

本次分享到这里就结束了，感谢您的阅读，如果本文对你有什么帮助，别忘了动动小手指点个赞❤️。

本文如果有什么错误或不足，欢迎评论区指正、交流。