介绍
swal2-inclass 是一个基于 sweetalert2 二次封装而成的 npm 包，可用于在 web 开发中快速实现弹窗效果。除了 sweetalert2 中原有的各种弹窗效果外，swal2-inclass 还新增了一些面向课堂教学场景的实用功能，诸如支持多行输入文本框、选项卡、多媒体插入等功能，方便教师和学生之间更加高效的互动、交流和学习。
安装
进入命令行界面，发出以下命令安装 swal2-inclass 包：
npm install swal2-inclass
安装后，可在项目中通过以下方式引入 swal2-inclass：
// ES6 模块 import 引入
import SwalInClass from 'swal2-inclass';
// CommonJS 模块 require 引入
const SwalInClass = require('swal2-inclass');使用
基本弹框
swal2-inclass 中与 sweetalert2 类似，最基本的弹框用法如下：
SwalInClass.fire('Hello, World!');既然是弹框，肯定是需要有一个触发条件的，通常是用户点击了某个按钮或者完成了某个操作，才会触发弹框。因此，下面的示例用一个按钮来触发弹框：
<!-- 页面中的按钮 --> <button onclick="showGreet()">Click me</button>
// 在 JavaScript 中定义 showGreet 函数
function showGreet() {
SwalInClass.fire('Hello, World!');
}带输入文本框的弹框
使用 swal2-inclass 包，可以方便地添加多行输入文本框，方便开发者自定义各种输入场景。
-- -------------------- ---- -------
-------------------
------ -----------
---------------- -
--------------- -----
--
----------------- -----
------------------ -----
----------------- -----
------------ -
-------------- ---- ----------- ------
------------- ---- --------------
--
----------- -------
---------- ------------ -- -
-- ------------ -
--------------------- ------------------
-
-
---使用上述配置即可创建一个带输入文本框和“确定”和“取消”按钮的弹框。
带选项卡的弹框
在课堂教学中，经常会需要切换不同的信息、工具、资源等。swal2-inclass 包提供了带选项卡的弹框，可以快速实现这类功能。
-- -------------------- ---- -------
-------------------
------ --------
---------- ------
--------- --
---- ---- ---
-------- -------- --
--
-
---- ---- ---
-------- -------- --
--
-
---- ---- ---
-------- -------- --
-
-
---上述代码会创建一个包含三个选项卡的弹框，每个选项卡对应一个内容区域。通过点击不同的选项卡，来展示对应的内容。
带富文本编辑器的弹框
在一些场景下，需要用户输入或编辑富文本，此时就可以使用包含富文本编辑器的弹框。在 webpack 项目中，使用以下方式引入 suneditor 包：
// 引入 suneditor 包
import suneditor from 'suneditor';
// 引入默认配置文件
import { baseEditorConfig } from 'swal2-inclass';然后，就可以通过如下代码来创建包含富文本编辑器的弹框：
-- -------------------- ---- -------
-------------------
--------------------
--------- -----
--------- --------- -- -
-- --------- -
------------------ ----- ------- ---
-
-
---需要注意的是，在使用富文本编辑器的过程中，可能会遇到各种难以调试的问题（如 SunEditor 需要 webpack + export 引入）。这时，您可以前往开发者社区或者项目网站上了解更多信息。
结语
以上是使用 swal2-inclass 包的一些示例教程，笔者在较短时间内收集了各种生产环境和课堂教学场景中的实际需求，并尝试将其整合为一个 npm 包。由于时间和精力的限制，可能还有一些问题和不足之处，还请读者多多包涵和指正。
如有疑问，欢迎在开发者社区中留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562c681e8991b448e0076