官网链接
准备阶段
CDN js
如果该 链接 时间久远了 , 可以在官网去找找最新的
可以把 js 复制出来 自己新建一个文件 然后 引用到 html 中
引用:<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
1. 带有 确定和取消的 弹框
Swal.fire({
type: 'warning', // 弹框类型
title: '注销帐号', //标题
text: "注销后将无法恢复,请谨慎操作!", //显示内容
confirmButtonColor: '#3085d6',// 确定按钮的 颜色
confirmButtonText: '确定',// 确定按钮的 文字
showCancelButton: true, // 是否显示取消按钮
cancelButtonColor: '#d33', // 取消按钮的 颜色
cancelButtonText: "取消", // 取消按钮的 文字
focusCancel: true, // 是否聚焦 取消按钮
reverseButtons: true // 是否 反转 两个按钮的位置 默认是 左边 确定 右边 取消
}).then((isConfirm) => {
try {
//判断 是否 点击的 确定按钮
if (isConfirm.value) {
Swal.fire("成功", "点击了确定", "success");
}
else {
Swal.fire("取消", "点击了取消", "error");
}
} catch (e) {
alert(e);
}
});
Swal.fire({
title: '领取你的寻龙装备!',
input: 'select',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Look up',
showLoaderOnConfirm: true,
preConfirm: (login) => {
return fetch(`//api.github.com/users/${login}`)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json()
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.value) {
Swal.fire({
title: `${result.value.login}'s avatar`,
imageUrl: result.value.avatar_url
})
}
})
原文地址:https://blog.csdn.net/qq_37214567/article/details/88062772