在前端开发中，使用好的工具和框架能够提高开发效率，加快产品迭代周期。其中，npm 包是前端开发中重要的一环。本文将介绍一个优秀的 npm 包——layverns，让你快速完成实现真正良质 <del>又好看</del> 的 layer 弹窗。
layverns 是什么
layverns 是基于 layer 弹窗的一款简化的弹窗组件库。使用它，你能够快速生成一个良好样式的弹窗，同时还支持自定义样式和弹窗内容。
使用前准备
在使用 layverns 前，你需要确保以下依赖已经安装到你的项目中：
安装 layverns
使用 npm 安装 layverns：
npm install layverns -S
基本使用
在 HTML 页面中，引入 jQuery 和 layer 样式及脚本：
<link rel="stylesheet" href="path/to/layer.css"> <script src="path/to/jquery.js"></script> <script src="path/to/layer.js"></script>
然后，再引入 layverns：
<script src="path/to/layverns.js"></script>
接下来，你可以使用以下代码创建一个简单的弹窗：
-- -------------------- ---- -------
-----------
-------- ------------------------
------ --------- ----
---- ------ ------
--------- ----
---- ----------------
-------------------
--
--- ----------------
-------------------
-
---以上代码中，content 是弹窗的内容，title 是弹窗的标题，btn 是底部按钮的显示文本，btnAlign 是底部按钮的对齐方式，yes 和 no 分别为点击底部按钮的回调函数，其中 index 为当前 layer 弹窗的索引。
效果如下：
高级用法
自定义样式
如果你不满足于弹窗默认的样式，可以自定义弹窗的 CSS 样式。举个例子，如下代码就是修改了弹窗背景颜色和文字颜色的样式：
.lay-vns .lay-vns-content {
background-color: #545c67;
color: #d7e1e9;
}在弹窗创建时加入 className 属性即可添加样式类：
-- -------------------- ---- -------
-----------
-------- --------------
---------- ---------------
---- -------
--------- ----
---- ----------------
-------------------
-
---多层弹窗
由于 layverns 是对 layer 的二次封装，因此你可以嵌套使用多个 layverns 弹窗来实现层级嵌套的效果：
-- -------------------- ---- -------
-----------
-------- ---- - -------
------ --- ---
---- --------
--------- ----
---- ----------------
-------------------
-----------
-------- ---- - -------
------ ----
------- ----
------ --- ---
---- -------
--------- ----
---- ----------------
-------------------
-
---
-
---效果如下：
其他方法
layverns 中，还提供了 alert 和 confirm 两个常用方法。
alert 是一个简单的提示框，只有一个确认按钮：
Lay.verns.alert('这是一个 alert 弹窗', {
yes: function(index){
layer.close(index);
}
});confirm 则是一个能够向用户询问确认或取消的弹窗，用法与 Lay.verns() 极其相似：
Lay.verns.confirm('你确认要提交吗？', {
btn: ['提交', '取消'],
btnAlign: 'r',
yes: function(index){
layer.close(index);
console.log('用户点击了确认按钮');
}
});总结
本文介绍了 npm 包 layverns 的使用方法，包括基本用法和高级用法。使用 layverns 能够快速生成符合设计风格的弹窗，让你的产品在视觉上更加优美，同时减少了开发成本，极力推荐大家使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055afd81e8991b448d8a6d