SweetAlert2-Icon

SweetAlert2-Icon是一种基于SweetAlert2弹出式JavaScript消息框的扩展，它可以添加一些带有图标和颜色的自定义弹出信息。SweetAlert2最初是Emanuel Sobral和Limonte Vincent的项目。其使用方式简单，可配置性高，而且可以美化alert对话框的样式。

特性

• 与SweetAlert2框架完全兼容。
• 支持多种自定义图标和颜色。
• 可以自定义按钮文本和操作。
• 支持在弹出框提示前验证表单信息。
• 自动适应响应式设计，适应各种设备尺寸。

安装

1. 引入SweetAlert2和SweetAlert2-Icon的CSS和JS文件

<!-- 引入SweetAlert2 CSS文件 -->
<link rel="stylesheet" href="path/to/sweetalert2.min.css">
<!-- 引入SweetAlert2 JS文件 -->
<script src="path/to/sweetalert2.min.js"></script>

<!-- 引入SweetAlert2-Icon CSS文件 -->
<link rel="stylesheet" href="path/to/sweetalert2-icon.css">
<!-- 引入SweetAlert2-Icon JS文件 -->
<script src="path/to/sweetalert2-icon.min.js"></script>

2. 初始化SweetAlert2弹出框

Swal.fire({
  title: 'Hello world!',
  text: 'This is a simple SWAL alert with some customizations!',
  type: 'info', //安装完扩展之后，可以使用扩展中的图标名称或者icon属性中自定义图片路径来为alert添加图标。
  confirmButtonText: 'OK'
})

使用

1. 弹出框带图标

在Swal.fire()中，使用type属性指定使用哪种图标。

Swal.fire({
  type: 'success',
  title: 'Good Job!',
  text: 'You guessed the correct answer!'
})

扩展图标的名称有以下几种：

• success
• error
• warning
• info
• question

2.自定义图标

使用icon属性来自定义图片图标，你可以指定一个图片URL或者一个图标类别和颜色。

Swal.fire({
  title: 'Sweet!',
  text: 'Modal with a custom image.',
  imageUrl: '/path/to/image.jpg',
  imageWidth: 400,
  imageHeight: 200,
  imageAlt: 'Custom image',
})

或者使用icon属性中的内容来指定一个图标类别和颜色。

Swal.fire({
  title: 'Sweet!',
  text: 'Here\'s a custom image.',
  imageUrl: '/path/to/image.jpg',
  imageWidth: 400,
  imageHeight: 200,
  imageAlt: 'Custom image',
  icon: 'success', // 这里指定了一个图标类别
})

3.自定义颜色

使用iconColor属性来自定义图标的颜色。

Swal.fire({
  icon: 'success',
  title: 'Nice one!',
  text: 'You successfully completed the task',
  iconColor: 'purple'
})

扩展方法

1.警告提示

显示一条橙色的警告通知。

Swal.fire({
  icon: 'warning',
  title: 'Oops...',
  text: 'Something went wrong!',
  confirmButtonText: 'Retry!',
  iconColor: '#ffc107' //设定为橙色
})

2.错误提示

显示一条红色的错误通知。

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  confirmButtonText: 'Retry!',
  iconColor: 'red' //设定为红色
})

3.成功提示

显示一条绿色的成功通知。

Swal.fire({
  icon: 'success',
  title: 'Yay!',
  text: 'Your task has been completed!',
  confirmButtonText: 'Great!',
  iconColor: 'green' //设定为绿色
})

4.信息提示

显示一条蓝色的信息通知。

Swal.fire({
  icon: 'info',
  title: 'Hey!',
  text: 'Here is some information for you.',
  confirmButtonText: 'Got it!',
  iconColor: 'blue' //设定为蓝色
})

总结

SweetAlert2-Icon是一个非常实用和个性化的JavaScript消息框扩展，能够让你快速构建自定义弹出框。它支持多种样式和自定义图标、字体和颜色，灵活性高，使用方便。