说明

  • 官方网址:https://sweetalert.js.org/docs/
  • 插件版本:2.0.1
  • 文档汉化:Joey Yan
  • 汉化说明:本人英语能力有限,如有不正确的地方欢迎在下方评论留言,或直接在线与我联系。

配置

概览

你可以使用这些参数,通过一个对象传入到sweetAlert中:

参数类型概述
textstring弹窗的内容
titlestring弹窗的标题
iconstring弹窗的图标
buttonstring boolean ButtonOptions修改弹窗默认按钮的样式
buttonsboolean string[] ButtonOptions[] ButtonList自定义弹窗的按钮
contentNode string用户自定义内容
classNamestring为弹窗添加一个自定义CLASS
closeOnClickOutsideboolean是否可通过遮罩关闭弹窗
closeOnEscboolean是否可通过esc键关闭弹窗
dangerModeboolean将弹窗样式变为关键提示样式
timernumber设置弹窗自动关闭时间

详细描述


text

类型

string

默认值

""(空字符串)

详细说明

弹窗的文本文字。它既可以作为配置的参数添加(如下例所示),也可以作为第一个也是唯一的参数传递(例如:swal("Hello world!")),如果你有多个字符串参数则传递给第二个参数(例如:swal("A title", "Hello world!"))。

演示

swal({
  text: "Hello world!",
});

title

类型

string

默认值

""(空字符串)

详细说明

弹窗的标题文字。它既可以作为配置的参数添加(如下例所示),也可以作为swal函数的第一个参数(当swal函数有多个参数时)进行传递(例如:swal("这是标题!","这是一些文字"))。

演示

swal({
  title: "这是一个标题!",
});

icon

类型

string

默认值

""(空字符串)

详细说明

弹窗显示的图标。 SweetAlert预定义了4个可以使用的内置图标:

  • "warning"
  • "error"
  • "success"
  • "info"
    它既可以作为配置的参数添加(如下例所示),也可以作为swal函数的第三个参数进行传递(例如:swal("Title", "Text", "success"))。

演示

swal({
  icon: "success",
});

button

类型

string boolean ButtonOptions

默认值

{
  text: "OK",
  value: true,
  visible: true,
  className: "",
  closeModal: true,
}

详细说明

默认显示确认按钮。您可以通过将button设置为string来更改其显示的文本,也可以通过传递ButtonOptions对象来调整更多设置。将其设置为false会隐藏按钮。

演示

swal({
  button: "Coolio",
});
swal({
  button: {
    text: "Hey ho!",
  },
});
swal("Hello world!", {
  button: false,
});

buttons

类型

boolean string[] ButtonOptions[] ButtonList

默认值

{
  cancel: {
    text: "Cancel",
    value: null,
    visible: false,
    className: "",
    closeModal: true,
  },
  confirm: {
    text: "OK",
    value: true,
    visible: true,
    className: "",
    closeModal: true
  }
}

详细说明

指定按钮的确切数量及每个按钮的配置。 如果使用字符串数组,则可以将元素设置为字符串(仅设置显示的文本),ButtonOptions对象可与字符串组合使用。 您还可以将其中一个元素设置为true,以便只获取按钮的默认选项。
如果您需要的不只默认的取消和确认按钮,则需要指定一个ButtonList对象,其中键(按钮的名称)的值为ButtonOptions
您还可以指定false来隐藏所有按钮(与button参数的效果相同)。

演示

swal({
  buttons: ["Stop", "Do it!"],
});
swal({
  buttons: [true, "Do it!"],
});
swal("Hello world!", {
  buttons: false,
});
swal({
  buttons: {
    cancel: true,
    confirm: true,
  },
});
swal({
  buttons: {
    cancel: true,
    confirm: "Confirm",
    roll: {
      text: "Do a barrell roll!",
      value: "roll",
    },
  },
});

content

类型

Node string

默认值

null

详细说明

用户自定义内容,可以但不限于修改文本与图标

演示

swal({
  content: "input",
});
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});
var slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider,
});

className

类型

string

默认值

""(空字符串)

详细说明

将自定义CLASS添加到SweetAlert元素中。 方便使用CSS样式改变外观。

演示

/* CSS样式 */
.red-bg{
  background-color: rgba(255,0,0,0.28);
}
//Javascript代码
swal("Hello world!", {
    className: "red-bg",
});

closeOnClickOutside

类型

boolean

默认值

true

详细说明

通过设置该参数来决定用户是否能够通过点击弹窗外部来关闭弹窗。

演示

swal({
  closeOnClickOutside: false,
});

closeOnEsc

类型

boolean

默认值

true

详细说明

通过设置该参数来决定用户是否能够通过按ESC键来关闭弹窗。

演示

swal({
  closeOnEsc: false,
});

dangerMode

类型

boolean

默认值

false

详细说明

如果设置为true,则确认按钮的颜色会变为红色,而默认焦点则会设置在取消按钮上。 当需要确认关键操作(例如删除项目)时,这很方便。

演示

swal("Are you sure?", {
  dangerMode: true,
  buttons: true,
});

timer

类型

number

默认值

null

详细说明

在一定时间后(单位为毫秒)关闭弹窗。 当button参数被设置为false时,这个参数很有用。

演示

swal("This modal will disappear soon!", {
  buttons: false,
  timer: 3000,
});

方法


名称描述示例
<font color=blue>close</font>关闭当前打开的SweetAlert弹窗,效果与手动按下取消按钮一样。swal.close()
<font color=blue>getState</font>获取当前SweetAlert弹窗的状态。swal.getState()
<font color=blue>setActionValue</font>修改当前弹窗按钮的文本。您可以只传一个字符串(默认情况下它会更改确认按钮的文本)或一个对象。swal.setActionValue({ confirm: 'Text from input' })
<font color=blue>stopLoading</font>删除弹窗中所有按钮的加载状态,可将其与button参数中的closeModal:false结合使用。swal.stopLoading()

正文结束
本文作者:

文章标题:SweetAlert弹窗插件中文API(二):文档

本文地址:https://www.yanjiayu.cn/js/sweetalertdocs.html

版权说明:本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
知识共享许可协议
最后修改:2021 年 02 月 01 日 11 : 27 AM
如果觉得我的文章对你有用,请随意赞赏