添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
发呆的哑铃  ·  email - Mail ...·  1 年前    · 
坏坏的铁板烧  ·  [D30] ...·  1 年前    · 
  • 产品大大提出需求:“这个这个,弹框‘噔’一下的动画感觉很累赘嘛,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方法,水落石出
  •