swal(SweetAlert)，使消息弹窗变得简洁而美观

安装

SweetAlert 的配置非常简洁和简单，没错！只要一行 JS 引用库就行啦~

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

同时还可以使用 NPM 来个性化安装配置，详情请转入官网获取；

npm install sweetalert

使用

这是一个系统内置的标准弹窗~

<input type="button" onclick="alert('Hi!~ 欢迎访问何星星网站！');" value="这是一个系统内置的标准弹窗~" />

使消息弹窗变得简洁而美观吧~

<input type="button" onclick="swal('Hi!~ 欢迎访问何星星网站！');" value="使消息弹窗变得简洁而美观吧~" />

是的，很简单，调用 swal 的方法只需将原生 alert 改为 swal 即可使消息弹窗变得优雅！

示例

一个通用的例子

显示简单的内容和一个确定按钮

swal("Hello world!");

要加个标题以醒目的方式来强调？这样！

swal("Here's the title!", "...and here's the text!");

当然，还可以在弹窗中添加一个图标！

有 4 分预定义的: "warning", "error", "success"  和 "info".

swal("Good job!", "You clicked the button!", "success");

并且，你还可以使用来美化你的输入框！~

swal("Write something here:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});

以及，支持 CSS 以个性化需求来美化框架~

.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);
}

官网

或者，还有更多好玩的方式，逛逛官网找一下吧~

https://sweetalert.js.org/