在前端开发中，由于某些原因我们可能需要使用弹出框和下拉选项等常见组件。为了方便快捷地完成这些任务，我们可以使用开源的 npm 包 drop-ng。
简介
drop-ng 是一个轻量级的 JavaScript 库，用于创建各种下拉框和弹出框。使用 drop-ng，我们可以轻松地创建多种类型的下拉框，如单选框、多选框、复选框、单行下拉列表、多行下拉列表等。
安装
为了使用 drop-ng，我们需要先安装它。在终端中运行以下命令即可完成安装：
npm install drop-ng --save
弹出框
使用 drop-ng 创建弹出框非常简单。下面我们来创建一个提示框，里面包含一段文本和一个按钮。以下是 HTML 代码：
<button id="btn">点击我</button> <div id="popup">这是一个弹出框</div>
接下来，我们需要在 JavaScript 文件中编写相关代码：
-- -------------------- ---- -------
------ ----- ---- ----------------
----- --- - -------------------------------
----- -------- - ---------------------------------
----------------------------- -- -- -
------------
------- ----
-------- ---------
--------- ---------
---
---在这段代码中，我们引入了 popup 模块，并使用它的 show 方法创建了一个提示框。show 方法接受一个参数对象，其中 anchor 表示弹出框相对于哪个元素弹出，content 表示弹出框的内容，position 表示弹出框的位置。
我们在按钮的点击事件中调用 show 方法，然后传入相关参数即可在页面中创建一个弹出框。
下拉框
使用 drop-ng 创建下拉框同样非常简单。下面我们来创建一个多选框和一个单行下拉列表。以下是 HTML 代码：
-- -------------------- ---- -------
------- ------------
------- ------------------ ----------
------- ------------------ ----------
------- ------------------ ----------
---------
---- --------------
------ --------------- -------------- ------------------
------ ------------------ ---------
------ --------------- -------------- ------------------
------ ------------------ ---------
------ --------------- -------------- ------------------
------ ------------------ ---------
------接下来，我们需要在 JavaScript 文件中编写相关代码：
import dropdown from 'drop-ng/dropdown';
const select = document.getElementById('select');
const checkboxDiv = document.getElementById('checkbox');
dropdown(select, { type: 'list' });
dropdown(checkboxDiv, { type: 'checkbox' });在这段代码中，我们分别创建了一个单行下拉列表和一个多选框，并使用 dropdown 方法分别将它们转换为对应的下拉框。
dropdown 方法接受两个参数，第一个参数是要转换的 HTML 元素，第二个参数是一个可选的配置对象，其中 type 表示要创建哪种类型的下拉框。
结束语
使用 drop-ng，我们可以轻松创建各种下拉框和弹出框，而且还能通过配置对象自定义它们的外观和行为。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0bc6