安装
NPM/Yarn
NPM结合Browserify 或 Webpack等工具是安装SweetAlert的推荐方法。
npm install sweetalert --save
然后,只需将其导入您的应用程序:
;
CDN
您还可以找到SweetAlert上unpkg 和 jsDelivr 和使用全局 swal
变量.
入门
显示提醒
将文件导入应用程序后,您可以调用该swal
函数 (确保在DOM加载后调用它!)
;
如果传递两个参数,第一个将是模态的标题,第二个是文本。
;
使用第三个参数,您可以在警报中添加一个图标!有4分预定义的: "warning"
, "error"
, "success"
和 "info"
.
;
使用选项
也可以使用对象作为唯一参数来重写最后一个示例:
;
使用此格式,我们可以指定更多选项来自定义警报。例如,我们可以将确认按钮上的文本更改为"Aww yiss!"
:
;
您甚至可以将第一种语法与第二种语法结合起来,这可能会为您节省一些输入:
;
有关所有可用选项的完整列表,请查看API 文档!
使用承诺
SweetAlert 使用 promises来跟踪用户如何与警报交互。
如果用户单击确认按钮,则承诺将解析为true
。如果警报被解除(通过在其外部单击),则承诺将解析为null
.
;
如果您想在执行危险操作之前警告用户,这会派上用场。通过设置更多选项,我们可以更好地提醒我们:
icon
可以设置为预定义"warning"
以显示一个很好的警告图标。- 通过设置
buttons
(复数)true
,除默认确认按钮外,SweetAlert还会显示取消按钮。 - 通过设置
dangerMode
为true
,焦点将自动设置在取消按钮而不是确认按钮上,并且确认按钮将为红色而不是蓝色以强调危险操作。
;
高级示例
自定义按钮
我们已经看到了如何使用确认按钮设置文本 button: "Aww yiss!"
.
如果我们还想显示和自定义取消按钮,我们可以设置buttons
为一个字符串数组,其中第一个值是取消按钮的文本,第二个值是确认按钮的文本:
;
如果您希望其中一个按钮只有默认文本,则可以将值设置为true
而不是字符串:
;
那么,如果你需要更多的不仅仅是一个取消和确认按钮?别担心,SweetAlert让你满意!
通过为其指定对象buttons
,您可以根据需要设置完全相同的按钮,并指定它们在单击时解析的值!
在下面的示例中,我们设置了3个按钮:
cancel
,默认情况下解析为null
并具有自定义"Run away!"
文本。catch
,它将解析为value
我们指定的("catch"
"Throw Pokéball!".defeat
。在这里,我们指定true
让SweetAlert为按钮设置一些默认配置。在这种情况下,它将设置text
为"Defeat"
(大写)和已解析的值defeat
。如果我们将cancel
按钮设置为true
,它仍将null
按预期解析。
;
您可以查看文档中的所有可用按钮选项。
AJAX请求
于SweetAlert是基于承诺的,因此将它与基于承诺的AJAX函数配对是有意义的。以下是fetch
用于在iTunes API上搜索艺术家的示例。请注意,我们正在使用content: "input"
以便在用户单击确认按钮时显示输入字段并检索其值:
;
使用DOM节点作为内容
有时,您可能会遇到这样的场景,即使用SweetAlert提供的开箱即用功能会更好,但是使用一些自定义UI不仅仅是样式按钮和文本。为此,有content
选择权。
在前面的示例中,我们看到了如何设置content
为在模态中"input"
获取 <input />
元素,该元素根据其值更改确认按钮的已解析值。"input"
是为了方便而存在的预定义选项,但您也可以设置content
为任何DOM节点!
让我们看看我们如何重新创建以下模态的功能......
;
...使用自定义DOM节点!
我们将在这里使用React ,因为它是一个众所周知的UI库,可以帮助我们理解如何创建更复杂的SweetAlert接口,但是您可以使用任何所需的库,只要您可以从中提取DOM节点!
;; const DEFAULT_INPUT_TEXT = ""; { superprops; thisstate = text: DEFAULT_INPUT_TEXT ; } { let text = etargetvalue; this; /* * This will update the value that the confirm * button resolves to: */ swal; } { return <input value=thisstatetext onChange=thischangeText /> } // We want to retrieve MyInput as a pure DOM node: let wrapper = document;ReactDOM;let el = wrapperfirstChild; ;
这看起来可能看起来非常复杂,但实际上非常简单。我们所做的只是创建一个输入标记作为React组件。然后,我们提取其DOM节点并将其传递到swal
函数的 content
选项下,以将其呈现为无样式元素。
唯一特定于SweetAlert的代码是最后swal.setActionValue()
的 swal()
调用。其余的只是基本的React和JavaScript。

使用库
虽然上面介绍的用于创建更高级模态设计的方法可行,但手动创建嵌套DOM节点变得非常繁琐。这就是为什么我们也可以使用SweetAlert Transformer轻松将您喜爱的模板库集成到SweetAlert中。
使用React
为了将SweetAlert与JSX语法一起使用,您需要SweetAlert with React安装sweetalert
和 @sweetalert/with-react
依赖关系package.json
.
那之后,这很容易。每当你想在SweetAlert模态中使用JSX时,只需从而@sweetalert/with-react
安装 sweetalert
.
JSX语法取代了modal的content
选项,因此您仍然可以使用SweetAlert的所有其他功能。以下是您如何实现我们之前看到的Facebook模式:
const onPick = { } const MoodButton = <button data-rating=rating className="mood-btn" onClick= />
从1.X升级
SweetAlert 2.0引入了一些重要的重大变化,以使库更易于使用和更灵活。
最重要的变化是不推荐使用回调函数来支持promises,并且您不再需要导入任何外部CSS文件(因为样式现在捆绑在.js文件中)。
以下是一些其他已弃用的选项及其替代品:
- 当使用单个字符串参数(例如
swal("Hello world!")
)时,该参数将是模态text
而不是它title
. type
并且imageUrl
已被替换为单一icon
选项。如果您使用的是速记版本(swal("Hi", "Hello world", "warning")
),则无需进行任何更改。customClass
现在className
.imageSize
不再使用。相反,您应该在必要时在CSS中指定维度限制。如果您有特殊用例,则可以为模态提供自定义类。showCancelButton
并且showConfirmButton
不再需要。相反,您可以设置buttons: true
显示两个按钮,或buttons: false
隐藏所有按钮。默认情况下,仅显示确认按钮。confirmButtonText
并且cancelButtonText
不再需要。相反,您可以设置button: "foo"
将确认按钮上的文本设置为“foo”,或buttons: ["foo", "bar"]
将取消按钮上的文本设置为“foo”,将确认按钮上的文本设置为“bar”。confirmButtonColor
不再使用。相反,您应该通过CSS指定所有样式更改。作为有用的简写,您可以设置dangerMode: true
为将确认按钮设置为红色。否则,您可以在按键对像指定一个类。closeOnConfirm
并且closeOnCancel
不再使用。相反,您可以closeModal
在按键对像设置参数。showLoaderOnConfirm
不再需要了。当closeModal
参数设置为时,您的按钮将自动显示loding动画false
.animation
已被弃用。所有风格变化都可以通过CSS和自定义模态类来应用。type: "input"
,inputType
,inputValue
和inputPlaceholder
已全部替换为content
选项。您可以指定content: "input"
获取默认选项,也可以使用内容对像进一步自定义选项。html
不再使用。而是使用内容对像.allowEscapeKey
现在是closeOnEsc
为了清楚。allowClickOutside
现在是closeOnClickOutside
为了清楚。