js-jquery-从SweetAlert到SweetAlert2

原文地址：https://github.com/limonte/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2

1. IE support

默认不制止IE，如果想支持IE11

<script src="bower_components/es6-promise/promise.auto.min.js"></script>

2. Promise instead of callback function

SweetAlert:

swal(
  {title: 'Are you sure?', showCancelButton: true}, 
  function(isConfirm) {
    if (isConfirm) {
      // handle confirm
    } else {
      // handle all other cases
    }
  }
);

SweetAlert2:

swal({title: 'Are you sure?', showCancelButton: true}).then(
  function(result) {
    // handle Confirm button click
    // result is an optional parameter, needed for modals with input
  }, function(dismiss) {
    // dismiss can be 'cancel', 'overlay', 'esc' or 'timer'
  }
);

3. Modal with input field

SweetAlert:

swal({
  ...
  type: 'input'
  ...
}, function(inputValue) { 
  ...
})

SweetAlert2:

swal({
  ...
  input: 'text' // can be also 'email', 'password', 'select', 'radio', 'checkbox', 'textarea', 'file'
  ...
}).then(function(inputValue) { 
  ...
})

4. Custom HTML in the title and description

SweetAlert:

swal({
  title: '<span class="title">Title</span>',
  text: '<span class="text">HTML description</span>',
  html: true
})

SweetAlert2:

swal({
  title: '<span class="title">Title</span>',
  html: '<span class="text">HTML description</span>'
})

5. closeOnConfirm and closeOnCancel parameters replaced with preConfirm

SweetAlert:

swal({
  {... closeOnConfirm: false},
  function() {
    // perform AJAX request
  }
});

SweetAlert2:

swal({
  ...
  showLoaderOnConfirm: true,
  preConfirm: function() {
    return new Promise(function(resolve) {
      setTimeout(function() {
        resolve();
      }, 2000);
    });
  }
}).then(function() {
  swal('Ajax request finished!');
});

6. Reversed buttons order

If you want to keep the buttons order like it was in the original SweetAlert plugin (Confirm button on the right side) set the reverseButtons parameter to true:

swal.setDefaults({
  reverseButtons: true
})