在现代前端开发中，我们使用大量的第三方库和工具来提高开发效率。其中，npm 是前端最流行的包管理器之一。它提供了丰富的包，可以快速解决开发过程中的问题。tapshow.js 就是其中一种优秀的 npm 包，用于实现简单的轻盈型弹框。
什么是 tapshow.js？
tapshow.js 是一个轻型的 JavaScript 弹框插件，它的特点是使用简单、轻巧、易于集成和自定义样式。它不依赖任何第三方库和框架，可以运行在所有主流的浏览器中。tapshow.js 提供了多种弹框类型和丰富的配置选项，可以满足各种需求和场景。
安装和使用
使用 tapshow.js 非常简单，只需几行代码即可实现弹框功能。
安装
使用 npm 安装 tapshow.js。
$ npm install tapshow.js --save
使用
在你的项目中引入 tapshow.js。
<script src="node_modules/tapshow.js/dist/tapshow.min.js"></script>
或者使用 ES6 模块化语法引入。
import tapshow from 'tapshow.js'
在需要使用的地方，使用以下代码即可创建一个默认样式的弹框。
tapshow.alert('这是一个弹框')配置选项
除了默认选项外，你还可以自定义弹框的样式和功能，tapshow.js 提供了以下配置选项。
type
弹框类型，有 alert、confirm 和 prompt 三种类型，默认为 alert。
tapshow.alert('这是一个 alert 弹框', {
type: 'alert'
})tapshow.confirm('这是一个 confirm 弹框', {
type: 'confirm'
})tapshow.prompt('这是一个 prompt 弹框', {
type: 'prompt'
})title
弹框标题，默认为空。
tapshow.alert('这是一个有标题的弹框', {
title: '提示'
})message
弹框内容，默认为空。
tapshow.alert('这是一个有内容的弹框', {
message: '请确认是否提交？'
})placeholder
prompt 弹框的输入框 placeholder，默认为‘请输入’。
tapshow.prompt('请输入名称', {
placeholder: '请填写个人姓名'
})callback
弹框按钮回调函数，默认为空。
tapshow.alert('这是一个回调函数示例', {
callback: function () {
console.log('我是回调函数')
}
})overlay
遮罩层是否开启，默认为 true。
tapshow.alert('有无遮罩层', {
overlay: true
})btns
弹框按钮列表。
-- -------------------- ---- -------
---------------------- -
----- -
-
----- -----
---------- ---------
--------- -------- -- -
-----------------
-
--
-
----- -----
---------- ----------
--------- -------- -- -
-----------------
-
-
-
--示例代码
以下是一个完整的 tapshow.js 引入及使用示例。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
-------
------
------- ------------------- -----------
------- ----------------------- -----------
------- --------------------- -----------
------- -----------------------------------------------------------
--------
----- -------- - -----------------------------------
----- ---------- - -------------------------------------
----- --------- - ------------------------------------
---------------------------------- -------- -- -
------------------- ----- ---- -
------ ------
-------- --------
----- -
-
----- -----
--------- -------- -- -
-----------------
-
--
-
----- -----
---------- ----------
--------- -------- -- -
-----------------
-
-
-
--
-- ------
------------------------------------ -------- -- -
--------------------- ------- ---- -
-------- -------------
----- -
-
----- -----
--------- -------- -- -
-----------------
-
--
-
----- -----
---------- ----------
--------- -------- -- -
-----------------
-
-
-
--
-- ------
----------------------------------- -------- -- -
----------------------- -
------------ --------
----- -
-
----- -----
--------- -------- -- -
-----------------
-
--
-
----- -----
---------- ----------
--------- -------- -- -
-----------------
-
-
-
--
-- ------
---------
-------
-------以上就是 tapshow.js 的使用教程，希望你可以根据这篇文章快速掌握这个优秀的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c7081e8991b448d9eb7