一个美观,响应,可定制,可访问(WAI-ARIA)替代JAVASCRIPT的弹出框

零依赖

正常弹窗

SweetAlert2

很酷吧?无论您使用的是台式电脑,手机还是平板电脑,SweetAlert2都会自动将自己置于页面中心,看起来很棒。它甚至可以高度定制,如下所示!

更多例子

下载并安装

$ npm install sweetalert2
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

用法

1.通过引用必要的文件初始化插件:

<script src="sweetalert2.all.min.js"></script>
<!-- Optional: include a polyfill for ES6 Promises for IE11 and Android browser -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>

如果需要,您还可以单独包含样式表:

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

要么

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

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

可以单独导入JS和CSS,例如,如果您需要自定义样式:

import Swal from 'sweetalert2/dist/sweetalert2.js'

import 'sweetalert2/src/sweetalert2.scss'

2.页面加载后调用sweetAlert2函数

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  type: 'error',
  confirmButtonText: 'Cool'
})

配置

以下是将对象传递给sweetAlert2时可以使用的键:

Argument 默认值 描述
title null 模态的标题,如HTML。它可以添加到键“title”下的对象中,也可以作为函数的第一个参数传递。
titleText null 模态的标题,作为文本。有助于避免HTML注入。
html null 模态的HTML描述。它可以添加到键“html”下的对象中,也可以作为函数的第二个参数传递。
text null 模态的描述。如果同时提供“text”和“html”参数,则将使用“text”。
type null 模态的类型。SweetAlert2附带5种内置类型,可显示相应的图标动画:warning, error, success, info, 和 question.。它可以放在键“type”下的数组中,也可以作为函数的第三个参数传递。
footer null 莫代尔的页脚。可以是纯文本或HTML。
backdrop true SweetAlert2是否应该显示全屏点击 - 解雇背景。可以是boolean 或将分配给CSS string属性的 background
toast false 是否应将警报视为Toast通知。此选项通常与position参数和计时器耦合。Toast永远不会自动聚焦。
target 'body' 用于添加模态的容器元素。
input null 输入字段类型,可以是 text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url.
width null 模态窗口宽度,包括填充 (box-sizing: border-box).可以是px%. 默认宽度为 32rem.
padding null 模态窗口填充。默认填充为 1.25rem.
background null M模态窗口背景(CSS背景属性)。默认背景为'#fff'.
position 'center' 模态窗口位置可以是'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', 或 'bottom-end'.
grow 'false' 与窗口位置配对,设置模态应该增长的方向,可以设置为'row', 'column', 'fullscreen', 或 false.
customClass '' 模态的自定义CSS类。如果提供了字符串值,则类名将应用于弹出窗口。如果提供了对象,则类名将应用于相应的字段:
customClass: {
  container: 'container-class',
  popup: 'popup-class',
  header: 'header-class',
  title: 'title-class',
  closeButton: 'close-button-class',
  icon: 'icon-class',
  image: 'image-class',
  content: 'content-class',
  input: 'input-class',
  actions: 'actions-class',
  confirmButton: 'confirm-button-class',
  cancelButton: 'cancel-button-class',
  footer: 'footer-class'
}
customContainerClass '' 已弃用并将在下一个主要版本中删除,请改用 customClass .
模态容器的自定义CSS类。
timer null 自动关闭模态的计时器。以ms(毫秒)为单位。另请参见Swal.getTimerLeft(), Swal.stopTimer(), Swal.resumeTimer(), Swal.toggleTimer(), Swal.isTimerRunning()Swal.increaseTimer().
animation true 如果设置为false,则将禁用模态CSS动画。
heightAuto true 默认情况下,SweetAlert2将html和body的CSSheightauto !important。如果此行为与项目的布局不兼容,请将heightAutofalse.
allowOutsideClick true 如果设置为false,则用户无法通过单击外部来解除模态。
您还可以传递返回布尔值的自定义函数,例如,如果要禁用模式加载状态的外部点击。
allowEscapeKey true 如果设置为false,则用户无法通过按键关闭模式Esc。您还可以传递返回布尔值的自定义函数,例如,如果要禁用Esc模式加载状态的键。
allowEnterKey true 如果设置为false,则用户无法通过按Enter键或空格键确认模态,除非他们手动对焦确认按钮。您还可以传递返回布尔值的自定义函数。
stopKeydownPropagation true 如果设置为false,SweetAlert2将允许keydown事件传播到文档。
keydownListenerCapture false 对于那些使用SweetAlert2和Bootstrap模态的人很有用。默认情况下,keydownListenerCapturefalse,这意味着当用户点击时Esc,SweetAlert2和Bootstrap模式都将被关闭。将keydownListenerCapture 设置为 true以修复该行为。
showConfirmButton true 如果设置为false,则不会显示“确认”按钮。当您使用自定义HTML描述时,它会很有用。
showCancelButton false 如果设置为true,将显示“取消”按钮,用户可以单击该按钮以关闭模式。
confirmButtonText 'OK' 使用此选项可更改“确认”按钮上的文本。
cancelButtonText 'Cancel' 使用此选项可更改"Cancel"按钮上的文本。
confirmButtonColor null 使用此选项可更改"Confirm"按钮的背景颜色。默认颜色为#3085d6
cancelButtonColor null 使用此选项可更改"Cancel“按钮的背景颜色。默认颜色为 #aaa
confirmButtonClass '' 已弃用并将在下一个主要版本中删除,请改用customClass
"Confirm"按钮的自定义CSS类。
cancelButtonClass '' 已弃用并将在下一个主要版本中删除,请改用customClass
"Cancel"按钮的自定义CSS类。
confirmButtonAriaLabel '' 使用此选项可更改"Confirm"按键的aria-label
cancelButtonAriaLabel '' 使用此选项可更改"Cancel"按键的aria-label
buttonsStyling true 将默认样式应用于按钮。如果要使用自己的类(例如Bootstrap类),请将此参数设置为false.
reverseButtons false 如果要反转默认按钮位置,则设置为true (右侧的"Confirm"按钮)。
focusConfirm true 如果要将第一个元素按Tab键顺序而不是“Confirm”按钮,则设置为false
focusCancel false 如果要在默认情况下关注“Cancel”按钮,则设置为true.
showCloseButton false 设置为true 以在模态的右上角显示关闭按钮。
closeButtonHtml '&times;' 使用此选项可更改关闭按钮的内容。
closeButtonAriaLabel 'Close this dialog' 使用此选项可更改关闭按钮的aria-label
showLoaderOnConfirm false 设置为true 可禁用按钮并显示正在加载的内容。将它与preConfirm参数结合使用。
scrollbarPadding true 设置为false以在显示模式时隐藏页面滚动条时禁用主体填充调整
preConfirm null 在确认之前执行的功能可以是异步(Promise-returning)或同步。
返回(或已解决)的值可以是:
  • false以防止弹出窗口关闭
  • 别的传递该值作为result.valueSwal.fire()
  • undefined 保留默认的 result.value
请参阅 用法示例.
imageUrl null 为模态添加自定义图标。应包含带有图像路径或URL的字符串。
imageWidth null 如果设置了imageUrl,则可以指定imageWidth来描述px中的图像宽度。
imageHeight null 自定义图像高度(px)。
imageAlt '' 自定义图像图标的备用文本。
imageClass '' 已弃用并将在下一个主要版本中删除,请改用customClass
自定义图标的自定义CSS类。
inputPlaceholder '' 输入字段占位符。
inputValue '' 输入字段初始值。

如果输入类型为checkbox, inputValue 将表示已checked 状态。

如果输入类型是text, email, number, teltextarea 则可以接受Promise作为 inputValue.
inputOptions {} 如果 input 参数设置为"select""radio",则可以提供选项。可以是Map或普通对象,其中键表示选项值和表示选项文本的值,或者是使用其中一种类型解析的Promise。
inputAutoTrim true 自动从结果字符串的两端删除空格。将此参数设置为false可禁用自动修剪。
inputAttributes {} 添加到输入字段的HTML输入属性(例如,min, max, autocomplete, accept)。对象键将表示属性名称,对象值将表示属性值。
inputValidator null 输入字段的验证器可以是异步(Promise-returning)或同步。
返回(或已解决)的值可以是:
  • 一个falsy value (undefined, null, false) for indicating success
  • 用于指示失败的字符串值(错误消息)
请参阅 用法示例.
validationMessage null 默认验证器的自定义验证消息(email,url)。
inputClass '' 已弃用并将在下一个主要版本中删除,请改用customClass
输入字段的自定义CSS类。
progressSteps [] 有关模态队列的进度步骤,请参阅用法示例
currentProgressStep null 当前有效的进展步骤。默认值为Swal.getQueueStep()
progressStepsDistance '40px' 进度步骤之间的距离。
onBeforeOpen null 函数在模态构建时运行,但尚未显示。提供modal DOM元素作为第一个参数。
onOpen null 当模态打开时运行的函数,提供模态DOM元素作为第一个参数。
onRender null 更新模态DOM后运行的函数。通常,这将在Swal.fire()Swal.update()之后发生。如果你想在模态的DOM中执行更改,在Swal.update(), onRender is a good place for that.
onClose null 当模态关闭时运行的函数,提供模态DOM元素作为第一个参数。
onAfterClose null 处理模态后运行的函数。

您可以通过使用Swal.mixin({ ...options })创建自己的`Swal`来轻松地重用配置:

禁止

当用户解除警报时,Swal.fire() 返回的Promise将通过一个对象{ dismiss: reason }解决,记录它被解雇的原因:

原因 描述 相关配置
Swal.DismissReason.backdrop 用户点击了背景幕。 allowOutsideClick
Swal.DismissReason.cancel 用户单击了取消按钮。 showCancelButton
Swal.DismissReason.close 用户单击关闭按钮。 showCloseButton
Swal.DismissReason.esc 用户单击了该Esc键。 allowEscapeKey
Swal.DismissReason.timer 计时器用完了,警报自动关闭。 timer

输入类型

text
email
url
password
textarea
select
radio
checkbox
file
range

不支持多个输入,您可以使用html和preConfirm参数来实现它们。
在preConfirm()函数内部,您可以返回(或者,如果异步,解析)自定义结果:

方法

方法 描述
Swal.isVisible() 确定是否显示模态。
Swal.mixin({ ...options }) 返回包含`params`作为默认值的`Swal`的扩展版本。用于重用Swal配置。
Swal.update({ ...options }) 更新弹出选项。
Swal.close() 以编程方式关闭当前打开的SweetAlert2模式,Swal.fire()返回的Promise 将使用空对象{}解析
Swal.getContainer() 获取包含背景的弹出容器。
Swal.getHeader() 获取模态标题。标题包含进度步骤,图标,图像,标题和关闭按钮。
Swal.getTitle() 获得模态标题。
Swal.getCloseButton() 获取关闭按钮。
Swal.getContent() 获取模态内容。
Swal.getImage() 获取image.
Swal.getActions() 获取动作块(按钮容器)。
Swal.getFooter() 得到模态页脚。
Swal.getFocusableElements() 获取弹出窗口中的所有可聚焦元素。
Swal.getConfirmButton() 获取 "Confirm" 按钮.
Swal.getCancelButton() 获取 "Cancel" 按钮.
Swal.enableButtons() 启用 "Confirm" 和 "Cancel" 按钮.
Swal.disableButtons() 禁用 "Confirm" 和 "Cancel" 按钮.
Swal.enableConfirmButton() 已弃用并将在下一个主要版本中删除,请改用Swal.getConfirmButton().
仅启用"Confirm"按键
Swal.disableConfirmButton() 已弃用并将在下一个主要版本中删除,请改用Swal.getConfirmButton() .
仅禁用"Confirm"按键
Swal.showLoading() or Swal.enableLoading() 禁用按钮和显示加载程序。这对AJAX请求很有用。
Swal.hideLoading() or Swal.disableLoading() 启用按钮并隐藏加载程序。
Swal.isLoading() 确定模态是否处于加载状态。相关方法:Swal.showLoading()Swal.hideLoading()
Swal.getTimerLeft() 返回设置 timer 参数时剩余的时间。
Swal.stopTimer() 如果设置了timer参数,则停止计时器。返回剩余的时间
Swal.resumeTimer() 恢复先前停止的timer。返回剩余的时间
Swal.toggleTimer() 在已停止和正在运行之间切换timer状态。返回剩余的时间
Swal.isTimerRunning() 返回timer的状态:如果正在运行,则为true;如果已暂停,则为false
Swal.increaseTimer(n) 增加timer by n 毫秒。返回剩余的时间
Swal.clickConfirm() 以编程方式单击"Confirm"按钮
Swal.clickCancel() 以编程方式单击"Cancel"按钮
Swal.getInput() 获取输入DOM节点,此方法适用于输入参数.
Swal.disableInput() 禁用输入。禁用的输入元素不可用且不可单击。
Swal.enableInput() 启用输入。
Swal.showValidationMessage(error) 显示验证消息DOM节点。
Swal.resetValidationMessage() 隐藏验证消息DOM节点。
Swal.getValidationMessage() 获取验证消息DOM节点。
Swal.queue([Array]) 提供SweetAlert2参数数组以显示多个模态,一个模态接一个。请参阅用法事例
Swal.getQueueStep() 获取队列中当前模态的索引。如果没有活动队列,则返回 null
Swal.insertQueueStep() 将模态插入队列,您可以使用第二个参数指定模态定位。默认情况下,模式将添加到队列的末尾。
Swal.deleteQueueStep(index) 从队列中删除index处的模态。
Swal.getProgressSteps() 进步步骤吸气剂。
Swal.setProgressSteps([]) 进度步骤设定器。
Swal.showProgressSteps() 显示进度步骤。
Swal.hideProgressSteps() 隐藏进度步骤。
Swal.isValidParameter(param) 确定参数名称是否有效。
Swal.isUpdatableParameter(param) 确定参数名称是否对Swal.update()方法有效。

Copyright © 2019 www.sweetalert2.cn sweetalert2中文网 版权所有