SweetAlert 弹窗插件入门教程

说明

功能说明：一款美的无可替代的弹窗插件

官方地址：https://sweetalert.js.org/guides/

汉化官网：http://mishengqiang.com/sweetalert/

项目地址：https://github.com/t4t5/sweetalert

同类文章

这里是其他博主写的几篇,小编觉得挺不错的,大家可以与本文综合来看

①CSDN 点击访问

②博客园-北执点击访问

③博客园-郁冬点击访问

④闲云小栈点击访问

安装

①NPM/Yarn

官网推荐的安装方法，使用命令行工具npm或Yarn来安装 SweetAlert

npm install sweetalert --save

然后，只需使用以下代码即可将其导入到您的应用程序：

import swal from 'sweetalert';

②CDN

您还可以在 unpkg 和 jsDelivr 网站上上找到 SweetAlert 的 CDN 服务，直接引用并使用全局变量swal

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

③github下载：点击下载

<span style="color: #000000;"><script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

开始使用 显示一个基本弹窗 将文件导入应用程序后，可以调用 swal 函数（请确保在 DOM 加载后再调用它！）来生成一个弹窗，参数为弹窗显示的内容，首先让我们从Hello world!开始

swal("Hello world!");

如果传递两个参数，那么第一个参数将是弹窗的标题，第二个参数是弹窗显示的文本。

swal('这是一个标题！', '...这是弹窗显示的文本！');

添加第三个参数，您就可以在弹窗中添加一个动态图标！一共有 4 个预定义好的参数：”warning”，”error”， “success”和 “info”。分别表示 “警告”、“错误”、“成功” 和“信息”。

swal('干得漂亮！', '你点击了这个按钮！','success');

sweetalert提供了5种情景模式的对话框。

选项配置

除了如上一步中快速生成一个弹窗外，也可以使用一个 JSON 对象作为唯一参数重写弹窗参数的方式来生成一个弹窗，如上一个示例中，如果使用参数重写方法，则代码为：

swal({
title: "干得漂亮！",
text: "你点击了这个按钮！",
icon: "success",
});

使用这种方式生成弹窗，我们可以指定更多的选项来自定义弹窗。例如，我们可以将弹窗的确认按钮的文本改为”没错！”：

swal({
title: "干得漂亮！",
text: "你点击了这个按钮！",
icon: "success",
button: "没错！",
});

你也可以将基本写法与选项配置结合着使用，这样做可以为您节省一些写代码的时间：

swal("干得漂亮！", "你点击了这个按钮！", "success", {
button: "没错！",
});

获取交互状态

SweetAlert 使用promises对象来跟踪用户如何与弹窗交互。如果用户单击确认按钮，则promise将返回true。如果弹窗被关闭（通过单击它外部），则promise将返回null。

swal("请单击按钮或弹窗的外部来关闭弹窗。")
.then((value) => {
swal(`返回的值为: ${value}`);
});

如果您想在执行关键操作之前警告用户，获取交互状态就可以派上用场。通过设置更多选项，我们还可以让弹窗变得更完善。

通过将icon参数设置为预定义的”warning”，以显示一个漂亮的警告图标。

通过将buttons（复数）参数设置为true，SweetAlert 除了显示默认的确认按钮之外，还将显示一个取消按钮。

通过将dangerMode参数设置为true，焦点将会自动设置在取消按钮而不是确认按钮上，并且确认按钮将会从默认的蓝色变为红色，以强调这是一个关键的操作。

swal({
title: "操作确认",
text: "删除后，您将无法恢复此虚拟文件！",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("噗！您的虚拟文件已被删除！", {
icon: "success",
});
} else {
swal("你的虚拟文件是安全的！");
}
});

高级用法

自定义按钮

在基础用法中，我们已经学到了如何将确认按钮的文本设置为没错！。如果还想显示自定义的取消按钮，我们可以将buttons参数的值设置为字符串数组，数组中第一个值是取消按钮的文本，第二个值是确认按钮的文本：

swal("你确定要这么做吗？", {
buttons: ["哦不！", "没错！"],
});

如果您只想修改其中一个按钮的默认文本，那么不需要修改的那个按钮你可以赋值为 true 而不是字符串：

swal("你确定要这么做吗？", {
buttons: ["哦不！", true],
});

那么如果您需要的不仅仅是取消和确认按钮呢？别担心，SweetAlert 依旧能够满意你的要求！

通过为按钮指定参数，您可以根据需要设置一个按钮，并指定它们在单击时返回的值！

在下面的示例中，我们设置了 3 个按钮：

cancel参数，默认情况下返回值为null并将其文本设置为”快跑!”。

catch参数，它将生成一个自定义按钮，文本内容为”扔神奇宝贝！”，返回值为”catch”。

defeat参数。我们将其设定为true，让 SweetAlert 为按钮设置一些默认配置。在这种情况下，它会将文本内容设置为”Defeat”（大写）, 返回值设置为”defeat”。如果我们将取消按钮设置为true，它仍将默认返回null。

swal("前方出现了一只野生的宠物小精灵，你想要怎么做？", {
buttons: {
cancel: "逃跑！",
catch: {
text: "扔神奇宝贝球！",
value: "catch",
},
defeat: true,
},
})
.then((value) => {
switch (value) {
case "defeat":
swal("宠物小精灵被你打败了，你获得500经验值！");
break;
case "catch":
swal("恭喜", "你抓到这只宠物小精灵了！", "success");
break;
default:
swal("你安全了！");
}
});

AJAX 请求

由于 SweetAlert 是基于promise对象的，所以 SweetAlert 可以使用基于promise的 AJAX 请求函数。下面是一个使用fetch在 iTunes API 上搜索艺术家的示例。请注意，我们使用了”input”控件，以便在用户单击确认按钮时显示输入的字段内容并获取它的值：

swal({
text: '请输入想要搜索的电影名称，如：“Fast & Furious”',
content: "input",
button: {
text: "搜索！",
closeModal: false,
},
})
.then(name => {
if (!name) throw null;
return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
return results.json();
})
.then(json => {
const movie = json.results[0];

if (!movie) {
return swal("未找到相关的内容！");
}

const name = movie.trackName;
const imageURL = movie.artworkUrl100;

swal({
title: "最佳匹配：",
text: name,
icon: imageURL,
});
})
.catch(err => {
if (err) {
swal("失败", "AJAX请求失败!", "error");
} else {
swal.stopLoading();
swal.close();
}
});

使用 DOM 节点作为弹窗内容

有时候，你可能会遇到这样一个场景：使用 SweetAlert 提供的开箱即用功能非常便利，但是有一些自定义的用户界面可能不仅仅需要样式按钮和文本。为此，SweetAlert 准备了content参数。

在上一个示例中，我们看到了如何将content参数设置为”input”以在我们的弹窗中生成一个<input />元素，当点击确认按钮时，其默认的返回值trye将被替换为<input />元素所输入的内容。”input”是为方便起见而存在的预定义选项，您可以将content参数的值设置为任何的 DOM 节点！

让我们来看看，如何重新创建以下弹窗的功能……

swal("请在下面的文本框中随意输入一些内容：", {
content: "input",
})
.then((value) => {
swal(`您输入的内容为：${value}`);
});

使用自定义 DOM 节点！

我们将在这里使用 React UI 库，他可以帮助我们了解如何创建更复杂的 SweetAlert，您也可以使用任何其他你熟悉或所需的库，只要您可以从中提取 DOM 节点！

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const DEFAULT_INPUT_TEXT = "";

class MyInput extends Component {
constructor(props) {
super(props);

this.state = {
text: DEFAULT_INPUT_TEXT,
};
}

changeText(e) {
let text = e.target.value;

this.setState({
text,
});

/*
* This will update the value that the confirm
* button resolves to:
*/
swal.setActionValue(text);
}

render() {
return (
<input
value={this.state.text}
onChange={this.changeText.bind(this)}
/>
)
}
}

// We want to retrieve MyInput as a pure DOM node: 
let wrapper = document.createElement('div');
ReactDOM.render(<MyInput />, wrapper);
let el = wrapper.firstChild;

swal({
text: "Write something here:",
content: el,
buttons: {
confirm: {
/*
* We need to initialize the value of the button to
* an empty string instead of "true":
*/
value: DEFAULT_INPUT_TEXT,
},
},
})
.then((value) => {
swal(`You typed: ${value}`);
});

触一开始看起来或许会觉得很复杂，但实际上非常简单。我们所做的只是创建一个<input />标签作为 React 组件。然后，我们提取其 DOM 节点并将其做为swal函数中content参数的值，以将其呈现为无样式元素。

其唯一的区别在于 SweetAlert 的代码是swal.setActionValue()和最后的swal()调用。其余的都只是基本的 React 和 JavaScript。

较 1.X 版本的升级

SweetAlert 2.0 引入了一些重大的变化，以使库更易于使用并且更加的灵活。

最重要的变化是promises不再推荐使用回调函数，并且您不再需要导入任何外部 CSS 文件（因为样式现在全部捆绑在了. js 文件中）。

以下是一些其他已被弃用的方法及其替代方法：

当使用单个字符串参数（例如：swal(“Hello world!”)）时，在 2.0 版本中该参数设置的是弹窗的文本，而在 1.0 中，该参数设置的是其标题。

type和imageUrl两个参数在 2.0 版本中已替换为单个icon参数。如果您使用的是基础弹窗（swal(“Hi”, “Hello world”, “warning”)），则无需进行任何更改。

customClass参数在 2.0 版本中更名为className。

弃用imageSize参数，在 2.0 版本中，您需要在 CSS 中指定相应的尺寸限制。如果您有特殊用例，则可以为组件提供自定义的 CLASS。

弃用showCancelButton和showConfirmButton参数，在 2.0 版本中，您可以通过设置buttons: true来表示显示默认配置的按钮，或buttons: false表示隐藏所有按钮。默认情况下，仅显示确认按钮。

弃用confirmButtonText和cancelButtonText参数。在 2.0 版本中，您可以设置buttons: “foo”将确认按钮上的文本设置为foot，或buttons: [“foo”, “bar”]将取消按钮上的文本设置为foo，将确认按钮上的文本设置为bar。