SweetAlert2

让我们来比较看一下错误消息的显示。第一个使用了内置的alert，第二个使用了sweetAlert2。

alert('哎呦……出错了！');

sweetAlert(
  '哎呦……',
  '出错了！',
  'error'
)

是不是非常的酷？无论你是在电脑、手机还是平板上，SweetAlert2都会在页面上自动居中显示，这看起来非常棒。SweetAlert2还可高度定制，正如下面你所看到的！

示例

• 基本信息弹窗

  尝试一下

  swal('任何一个傻瓜都会用电脑')

• 标题与文本的信息弹窗

  尝试一下

  swal(
    '互联网？',
    '还在吗？',
    'question'
  )

• 成功信息弹窗！

  尝试一下

  swal(
    '干得漂亮！',
    '你点击了按钮！',
    'success'
  )

• 定时关闭信息弹窗

  尝试一下

  swal({
      title: '自动关闭弹窗！',
      text: '2秒后自动关闭。',
      timer: 2000
  }).then(
      function () {},
      // handling the promise rejection
      function (dismiss) {
          if (dismiss === 'timer') {
              console.log('I was closed by the timer')
          }
      }
  )

• 自定义HTML描述和按钮

  尝试一下

  swal({
    title: '<i>HTML</i> <u>示例</u>',
    type: 'info',
    html:
      '你可以使用<b>粗体文本</b>, ' +
      '<a href="//github.com">链接</a> ' +
      '和其它的HTML标签',
    showCloseButton: true,
    showCancelButton: true,
    confirmButtonText:
      '<i class="fa fa-thumbs-up"></i> 太棒了！',
    cancelButtonText:
      '<i class="fa fa-thumbs-down"></i>'
  })

• 带自定义动画的jQuery HTML (Animate.css )

  尝试一下

  swal({
    title: 'jQuery HTML 示例',
    html: $('<div>')
      .addClass('some-class')
      .text('jQuery无处不在。'),
    animation: false,
    customClass: 'animated tada'
  })

• 警告信息弹窗，“确认”按钮带有一个函数……

  尝试一下

  swal({ 
    title: '确定删除吗？', 
    text: '你将无法恢复它！', 
    type: 'warning',
    showCancelButton: true, 
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '确定删除！', 
  }).then(function(){
    swal(
      '删除！',
      '你的文件已经被删除。',
      'success'
      );
  })

• …… 给函数传入参数，"取消"按钮也可以执行。

  尝试一下

  swal({
    title: '确定删除吗？', 
    text: '你将无法恢复它！', 
    type: 'warning',
    showCancelButton: true, 
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '确定删除！', 
    cancelButtonText: '取消删除！',
    confirmButtonClass: 'btn btn-success',
    cancelButtonClass: 'btn btn-danger',
    buttonsStyling: false
  }).then(function() {
    swal(
      '已删除！',
      '你的文件已经被删除。',
      'success'
    ); 
  }, function(dismiss) {
    // dismiss的值可以是'cancel', 'overlay',
    // 'close', 'timer'
    if (dismiss === 'cancel') {
      swal(
        '已取消！',
        '你的虚拟文件是安全的:)',
        'error'
      ); 
    } 
  })

• 自定义图标并且禁用动画的信息弹窗

  尝试一下

  swal({ 
    title: 'Sweet!', 
    text: '自定义图片弹窗',
    imageUrl: 'https://unsplash.it/400/200',
    imageWidth: 200,
    imageHeight: 200,
    animation: false
  })

• 自定义width、padding和background的信息弹窗

  尝试一下

  swal({
    title: '自定义width、padding和background。',
    width: 600,
    padding: 100,
    background: '#fff url(images/tdUzX2P.png)'
  })

• Ajax 请求示例

  尝试一下

  swal({
    title: '提交email来运行ajax请求',
    input: 'email',
    showCancelButton: true,
    confirmButtonText: 'Submit',
    showLoaderOnConfirm: true,
    preConfirm: function(email) {
      return new Promise(function(resolve, reject) {
        setTimeout(function() {
          if (email === 'taken@example.com') {
            reject('该email已存在。');
          } else {
            resolve();
          }
        }, 2000);
      });
    },
    allowOutsideClick: false
  }).then(function(email) {
    swal({
      type: 'success',
      title: 'Ajax请求完成！',
      html: '提交的email是：' + email
    });
  })

• 链式弹窗（队列）示例

  尝试一下

  swal.setDefaults({
    confirmButtonText: '下一个 →',
    showCancelButton: true,
    animation: false
  });
  
  var steps = [
    {
      title: '问题 1',
      text: 'swal2链式弹窗是简单的'
    },
    '问题 2',
    '问题 3'
  ];
  
  swal.queue(steps).then(function() {
    swal({
      title: '完成！',
      confirmButtonText: '漂亮！',
      showCancelButton: false
    });
  }).finally(function() {
    swal.resetDefaults();
  })

• 动态队列示例

  尝试一下

  swal.queue([{
    title: '你的公网IP',
    confirmButtonText: '显示我的公网IP',
    text:
      '你将收到公网IP，' +
      '通过AJAX请求',
    showLoaderOnConfirm: true,
    preConfirm: function () {
      return new Promise(function (resolve) {
        $.get('https://api.ipify.org?format=json')
          .done(function (data) {
            swal.insertQueueStep(data.ip)
            resolve()
          })
      })
    }
  }])

$ npm install sweetalert2

$ bower install sweetalert2

<script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css">

<!-- Include a polyfill for ES6 Promises (optional) for IE11 and Android browser -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>

// ES6 Modules
import { default as swal } from 'sweetalert2'

// CommonJS
const swal = require('sweetalert2')

swal({
    title: '错误！',
    text: '是否继续',
    type: 'error',
    confirmButtonText: '酷'
})

swal(...)
  .catch(swal.noop)

弹窗类型

输入类型

swal({
  title: '随便输入点什么',
  input: 'text',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value) {
        resolve()
      } else {
        reject('你需要输入一些东西')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: '你输入的是：' + result
  })
})

swal({
  title: '输入email地址',
  input: 'email'
}).then(function (email) {
  swal({
    type: 'success',
    html: '输入的email是：' + email
  })
})

swal({
  title: '输入你的密码',
  input: 'password',
  inputAttributes: {
    'maxlength': 10,
    'autocapitalize': 'off',
    'autocorrect': 'off'
  }
}).then(function (password) {
  if (password) {
    swal({
      type: 'success',
      html: '输入的密码是：' + password
    })
  }
})

swal({
  input: 'textarea',
  showCancelButton: true
}).then(function (text) {
  if (text) {
    swal(text)
  }
})

swal({
  title: '选择乌克兰',
  input: 'select',
  inputOptions: {
    'SRB': '塞尔维亚',
    'UKR': '乌克兰',
    'HRV': '克罗地亚'
  },
  inputPlaceholder: '请选择国家',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value === 'UKR') {
        resolve()
      } else {
        reject('你需要选择乌克兰:)')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: '你的选择是：' + result
  })
})

// inputOptions可以使一个object或者Promise
var inputOptions = new Promise(function (resolve) {
  setTimeout(function () {
    resolve({
      '#ff0000': '红色',
      '#00ff00': '绿色',
      '#0000ff': '蓝色'
    })
  }, 2000)
})

swal({
  title: '选择颜色',
  input: 'radio',
  inputOptions: inputOptions,
  inputValidator: function (result) {
    return new Promise(function (resolve, reject) {
      if (result) {
        resolve()
      } else {
        reject('你需要选择一项！')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: '你的选择是：' + result
  })
})

swal({
  title: '条款和条件',
  input: 'checkbox',
  inputValue: 1,
  inputPlaceholder:
    '我同意条款和条件',
  confirmButtonText:
    '继续 <i class="fa fa-arrow-right></i>',
  inputValidator: function (result) {
    return new Promise(function (resolve, reject) {
      if (result) {
        resolve()
      } else {
        reject('你需要同意条款和条件')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    text: '你同意了条款和条件:)'
  })
})

swal({
  title: '选择图片',
  input: 'file',
  inputAttributes: {
    accept: 'image/*'
  }
}).then(function (file) {
  var reader = new FileReader
  reader.onload = function (e) {
    swal({
      imageUrl: e.target.result
    })
  }
  reader.readAsDataURL(file)
})

swal({
  title: '你的年龄？',
  type: 'question',
  input: 'range',
  inputAttributes: {
    min: 8,
    max: 120,
    step: 1
  },
  inputValue: 25
})

swal({
  title: '多输入',
  html:
    '<input id="swal-input1" class="swal2-input">' +
    '<input id="swal-input2" class="swal2-input">',
  preConfirm: function () {
    return new Promise(function (resolve) {
      resolve([
        $('#swal-input1').val(),
        $('#swal-input2').val()
      ])
    })
  },
  onOpen: function () {
    $('#swal-input1').focus()
  }
}).then(function (result) {
  swal(JSON.stringify(result))
}).catch(swal.noop)

贡献

如果你想要添加新特性，欢迎你在GitHub上fork SweetAlert2项目！

本站点翻译自SweetAlert2