暄风吹斋响苍玉,竹石相看便有情。提胡卢来沽美酒,终日撩人不住声。

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

说明


官方网址:https://sweetalert.js.org/docs/

插件版本:2.0.1

文档汉化:Joey Yan

汉化说明:本人英语能力有限,如有不正确的地方欢迎在下方评论留言,或直接在线与我联系。


配置


概览

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

参数 类型 概述
text string 弹窗的内容
title string 弹窗的标题
icon string 弹窗的图标
button string boolean ButtonOptions 修改弹窗默认按钮的样式
buttons boolean string[] ButtonOptions[] ButtonList 自定义弹窗的按钮
content Node string 用户自定义内容
className string 为弹窗添加一个自定义CLASS
closeOnClickOutside boolean 是否可通过遮罩关闭弹窗
closeOnEsc boolean 是否可通过esc键关闭弹窗
dangerMode boolean 将弹窗样式变为关键提示样式
timer number 设置弹窗自动关闭时间

详细描述


text

类型

string

默认值

""(空字符串)

详细说明

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

演示

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

title

类型

string

默认值

""(空字符串)

详细说明

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

演示

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

icon

类型

string

默认值

""(空字符串)

详细说明

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

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

演示

1
2
3
swal({
icon: "success",
});

button

类型

string boolean ButtonOptions

默认值

1
2
3
4
5
6
7
{
text: "OK",
value: true,
visible: true,
className: "",
closeModal: true,
}

详细说明

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

演示

1
2
3
swal({
button: "Coolio",
});

1
2
3
4
5
swal({
button: {
text: "Hey ho!",
},
});

1
2
3
swal("Hello world!", {
button: false,
});

buttons

类型

boolean string[] ButtonOptions[] ButtonList

默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
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参数的效果相同)。

演示

1
2
3
swal({
buttons: ["Stop", "Do it!"],
});

1
2
3
swal({
buttons: [true, "Do it!"],
});

1
2
3
swal("Hello world!", {
buttons: false,
});

1
2
3
4
5
6
swal({
buttons: {
cancel: true,
confirm: true,
},
});

1
2
3
4
5
6
7
8
9
10
swal({
buttons: {
cancel: true,
confirm: "Confirm",
roll: {
text: "Do a barrell roll!",
value: "roll",
},
},
});

content

类型

Node string

默认值

null

详细说明

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

演示

1
2
3
swal({
content: "input",
});

1
2
3
4
5
6
7
8
9
swal({
content: {
element: "input",
attributes: {
placeholder: "Type your password",
type: "password",
},
},
});

1
2
3
4
5
6
var slider = document.createElement("input");
slider.type = "range";

swal({
content: slider,
});

className

类型

string

默认值

""(空字符串)

详细说明

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

演示

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

closeOnClickOutside

类型

boolean

默认值

true

详细说明

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

演示

1
2
3
swal({
closeOnClickOutside: false,
});

closeOnEsc

类型

boolean

默认值

true

详细说明

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

演示

1
2
3
swal({
closeOnEsc: false,
});

dangerMode

类型

boolean

默认值

false

详细说明

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

演示

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

timer

类型

number

默认值

null

详细说明

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

演示

1
2
3
4
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 删除弹窗中所有按钮的加载状态,可将其与button参数中的closeModal:false结合使用。 swal.stopLoading()

美化主题

通过编辑指定CLASS的CSS样式,可以自定义SweetAlert弹窗不同部位的样式


swal-overlay

说明

修改弹窗的遮罩样式

示例

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

swal-modal

说明

修改弹窗主界面的样式

示例

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

swal-title

说明

修改弹窗标题栏的样式

示例

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

swal-text

说明

修改弹窗文本栏的样式

示例

1
2
3
4
5
6
7
8
9
.swal-text {
background-color: #FEFAE3;
padding: 17px;
border: 1px solid #F0E1A1;
display: block;
margin: 22px;
text-align: center;
color: #61534e;
}

说明

修改弹窗底部栏(按钮区域)的样式

示例

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

swal-button

说明

修改弹窗中所有按钮的样式,弹窗按钮除了都有swal-button类外,不同类型的按钮还有一个额外的类,格式为swal-button-[type]。例如,确认按钮的额外的类是swal-button-confirm,当仅需要自定义某个按钮的样式时,就可以用这个额外类去修改。

示例

1
2
3
4
5
6
7
8
9
/* 修改全部按钮 */
.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);
}

-------------本文结束感谢您的阅读-------------
坚持原创技术及精品文章分享,您的支持将鼓励我继续创作!
0%