sweetalert使用踩坑记--animation配置失效--源码攀爬之旅

南方小菜
1,234 阅读3分钟

文章结论

先写结论，省童鞋们的时间：sweetalert不支持（废弃了）animation的配置

前言背景

应届生新人入职半个月，今日情景~~

  • 产品大大提出需求：“这个这个，弹框‘噔’一下的动画感觉很累赘嘛，xxx去掉一下”；
  • “奴才领命” 查阅代码发现公司采用sweetalert作为弹窗提示插件，插件嘛，简单，看看文档看看博客预期三除五二下应该很快能解决，怎奈，他那时候还太年轻，不知道所有命运馈赠的礼物，早已经在暗中标好了价格。遂开始踩坑之旅

问题

其实情况挺简单，查找文档以及网友支持，都说只要配置animation项即可，但配置好了打死不生效，开始担心版本，1.0和2.0的版本中，前者说是用false，后者说是用none，虽说查看源码版本说是1.0，但也都试试了，结果果然。。还是然并卵；开始挠头。。 经过一上午的查阅资料和博客无效，放弃挣扎，再者咱怎能当伸手党，来到史上最大的同性交友网站--github，开始查阅源码，注意注意，重点来啦，源码开始！！

源码浅略解析

  • 使用代码及效果如下
 swal({
                  title: "删除订单",
                  text:'订单删除后不可找回，请确认是否删除',
                  icon: "error",
                  animation: false,
                  buttons: {
                    cancel: '取消',
                    confirm: '确定删除',
                  }
                }).then(isConfirm => {
                    if(isConfirm){
                        self.delete_loading = true
                        http.delete('/order/'+item.id,{},response => {
                            self.delete_loading = false
                            self.current_order.splice(index, 1)
                        })
                    }
                })

  • 首先来到源码文件夹,本小菜开始在src下寻找入口文件（别问为啥）

  • 进入core.ts文件开始探究，关键代码如下（虽然是typescript写的，但其实语法差异是不大的，结合之前实习过java，ts个人理解只是对弱类型的js进行了一层抽象与规范而已，不了解ts的童鞋看不懂的地方就当没看见，其实也是能够理解的啦）

const swal:SweetAlert = (...args) => {

  // Prevent library to be run in Node env:
  if (typeof window === 'undefined') return;

  const opts: SwalOptions = getOpts(...args);

  return new Promise<any>((resolve, reject) => {
    state.promise = { resolve, reject };

    init(opts);

    // For fade animation to work:
    setTimeout(() => {
      openModal();
    });

  });
};
  • 于是得到重点函数，getOpts，见名知意，是对配置参数的处理 进入此函数

可以看到，此处遍历配置参数切通过paramToOption方法对参数进一步处理然后用assign进行对象合并处理，从而得到最终的配置对象，我们也应该理所应当的想到，此处必然有一个默认参数对象与传递参数对象的合并；查找发现如下

可以发现，配置对象的接口，居然，没有，animation？？！！

  • 打破砂锅问到底，进一步探索 注意到getOpts方法内有一步操作，是遍历finalOptions最终配置对象，打印日志，进入logDeprecation方法，水落石出

  • 查阅后发现DEPRECATED_OPTS是指已废弃的配置属性，发现了我们可爱可怜的animation，此处就不贴图了，伤口刚刚愈合，奈何晴空孤雁，独留一人伤心；
  • 最后最后，强调一下，文档有误，居然还有animation配置，各位童鞋莫要踩坑

avatar
文章
阅读
粉丝