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。

弃用confirmButtonColor参数。在 2.0 版本中,您应该通过 CSS 指定所有样式的更改。作为预设的简写,您可以设置dangerMode:true以将确认按钮变为红色。或者,您可以在buttons参数中为每一个按钮指定一个 CLASS。

弃用closeOnConfirm和closeOnCancel。在 2.0 版本中,您可以在buttons参数中为每个按钮设置closeModal参数。

弃用showLoaderOnConfirm参数。在 2.0 版本中,当按钮的closeModal参数设置为false时,您的按钮将自动显示 loding 动画。

弃用animation参数。在 2.0 版本中,所有样式更改都可以通过 CSS 和自定义弹窗 CLASS 来实现。

type: “input”, inputType, inputValue 和 inputPlaceholder参数在 2.0 版本中都已被content对象替代。您可以通过指定content: “input”以获取默认选项,也可以使用content对象进一步自定义内容。

在 2.0 中不再使用HTML。而是使用content对象。

为消除歧义,更清晰描述参数的功能,allowEscapeKey参数在 2.0 版本中更名为closeOnEsc。

为消除歧义,更清晰描述参数的功能,allowClickOutside参数在 2.0 版本中更名为closeOnClickOutside。

 

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片