安装

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/


0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。