配置

• text

  类型: string

  默认值: "" (空字符串 )

  描述:

  模态的文字。它既可以作为键下的配置添加text（如下例所示），也可以作为第一个也是唯一的参数（例如swal("Hello world!")）传递，如果有多个字符串参数（例如swal("A title", "Hello world!")），则传递给第二个参数。

  例子:

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

• title

  类型: string

  默认值: "" (空字符串)

  描述:

  模态的标题。它既可以作为键下的配置添加title（如下例所示），也可以作为第一个字符串参数 - 只要它不是唯一的一个 - 作为swal函数（例如swal("Here's a title!", "Here's some text")）传递。

  例子:

  swal({
    title: "Here's a title!",
  });

• icon

  类型: string

  默认值: "" (empty string)

  描述:

  模态的图标。SweetAlert附带4个可以使用的内置图标：

  • "warning"
  • "error"
  • "success"
  • "info"

  它既可以作为键下的配置添加，也可以作为函数icon的第三个字符串参数传递swal（例如 swal("Title", "Text", "success")).

  例子:

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

• button

  类型: string|boolean|ButtonOptions

  默认值:

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

  描述:

  默认显示的确认按钮。您可以通过设置button为字符串来更改其文本，也可以通过传递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

  默认值: "" (empty string)

  描述:

  将自定义类添加到SweetAlert模式。这对于改变外观很方便。

  Example:

    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

  描述:

  在一定时间后（以ms为单位指定）关闭模态。有用的结合buttons: false.

  例子:

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

方法

名称	描述	例子
close	关闭当前打开的SweetAlert，就像按下取消按钮一样。	swal.close()
getState	获取当前SweetAlert模态的状态。	swal.getState()
setActionValue	更改其中一个模态按钮的承诺值。您可以只传入一个字符串（默认情况下它会更改确认按钮的值）或一个对象。	swal.setActionValue({ confirm: 'Text from input' })
stopLoading	删除模态按钮上的所有加载状态。将其与按钮选项结合使用closeModal: false.	swal.stopLoading()

主题

• swal-overlay

  例子:

  .swal-overlay {
    background-color: rgba(43, 165, 137, 0.45);
  }

• swal-modal

  例子:

  .swal-modal {
    background-color: rgba(63,255,106,0.69);
    border: 3px solid white;
  }

• swal-title

  例子:

  .swal-title {
    margin: 0px;
    font-size: 16px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
    margin-bottom: 28px;
  }

• swal-text

  例子:

  .swal-text {
    background-color: #FEFAE3;
    padding: 17px;
    border: 1px solid #F0E1A1;
    display: block;
    margin: 22px;
    text-align: center;
    color: #61534e;
  }

• swal-footer

  例子:

  .swal-footer {
    background-color: rgb(245, 248, 250);
    margin-top: 32px;
    border-top: 1px solid #E9EEF1;
    overflow: hidden;
  }

• swal-button

  描述:

  模态的按钮。它有一个额外的类，它根据按钮的类型以格式改变swal-button--{type}。例如，确认按钮的额外类是swal-button--confirm.

  例子:

  .swal-button {
    padding: 7px 19px;
    border-radius: 2px;
    background-color: #4962B3;
    font-size: 12px;
    border: 1px solid #3e549a;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
  }