一个漂亮的JavaScript“警告”替代品

下载

一个漂亮的JavaScript“警告”替代品

安装
$ npm安装—节省sweetalert
使用
从“sweetalert”进口swal;

横波测井(“Hello world !”);
从1. x升级
在2.0版本中引入了许多改进和破坏性更改。确保你阅读了升级指南，以避免令人讨厌的意外!
指南

安装
开始
先进的例子
使用的库
从1. x升级

文档

配置
方法
主题

例子
一个错误信息:
swal(“哎呀!”、“出错了!”、“错误”);
一个警告信息，在确认信息上附加一个功能:

使用承诺:

横波测井({
标题:“你确定吗?”
文字:“你确定要离开这一页吗?”
图标:“警告”,
dangerMode:没错,
})
不要犹豫(willDelete =比;{
如果(willDelete) {
swal(“删除!”，“您假想的文件被删除!”，“成功”);
}
});

使用异步/等待:

const willDelete =等待swal({
标题:“你确定吗?”
文本:“您确定要删除此文件吗?”
图标:“警告”,
dangerMode:没错,
});

如果(willDelete) {
swal(“删除!”，“您假想的文件被删除!”，“成功”);
}
一个提示模式，用户的输入被记录:

使用承诺:

横波测井(“类型一:{
内容:“输入”,
})
不要犹豫((值)=比;{
横波测井(键入:$ {value});
});

使用异步/等待:

const value =等待swal("键入某事"，{
内容:“输入”,
});

横波测井(键入:$ {value});
结合Fetch:

使用承诺:

横波测井({
文字:“想记录一些关于Bulbasaur的信息吗?”
按钮:{
文本:“搜索!”
closeModal:假的,
},
})
不要犹豫(willSearch =比;{
如果(willSearch) {
返回获取(“http://pokeapi.co/api/v2/pokemon/1”);
}
})
不要犹豫(结果=比;result.json ())
不要犹豫(json =比;console.log (json))
.catch(呃=比;{
swal(“哎呀!”，“似乎我们无法获取信息”，“错误”);
});

使用异步/等待:

const willSearch =等待swal({
文字:“想记录一些关于Bulbasaur的信息吗?”
按钮:{
文本:“搜索!”
closeModal:假的,
},
});

如果(willSearch) {
尝试{
const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
const json = await result.json();
console.log (json);
捕获(err) {
swal(“哎呀!”，“似乎我们无法获取信息”，“错误”);
}
}
使用与反应
SweetAlert有一些工具可以集成到你最喜欢的渲染库中。
如果您正在使用React，您可以在主库之外安装与React一起的SweetAlert，并轻松地向警报添加React组件，如下所示:
从“React”导入React
从“@sweetalert/with-react”导入swal

横波测井(
& lt; div>
& lt; h1> Hello world ! & lt; / h1>
& lt; p>
它现在是用JSX呈现的!
& lt; / p>
& lt; / div>
)
阅读更多关于与React集成的内容
贡献
如果你要改变核心库:

在src文件夹中进行更改。
通过运行npm运行文档预览更改
提交拉请求

如果您正在更改文档:

在文档-src文件夹中进行更改。
通过运行npm运行文档预览更改
运行npm运行builddocs将更改编译到docs文件夹
提交拉请求

贡献者
这个项目的存在要感谢所有的贡献者。(贡献)。

支持者
感谢我们所有的支持者!(成为支持者)

赞助商
通过成为赞助者来支持这个项目。您的徽标将显示在这里与您的网站链接。(成为赞助商)本文转载于：http://www.diyabc.com/frontweb/news33303.html