前言
在现代的 Web 开发中，弹出层的使用非常普遍。而要实现弹出层，有一个重要的前置操作：计算弹出层的位置，以使其准确地出现在指定的位置。这就是所谓的 popper。在本文中，我将介绍一个弹出层定位库——@clbn/popper.js 的使用方式。
什么是 popper？
在开始讲解 @clbn/popper.js 之前，我们需要先理解什么是 popper。
Popper，全称为 Popper.js，是一个轻量的、非侵入式的用于计算弹出层位置的库，它可以帮助我们把一个弹出层准确定位到特定的目标元素旁。
@clbn/popper.js 是什么？
@clbn/popper.js 是 Popper.js 的一个 fork 版本，它由 @clbn 团队维护。它是一种轻量的、可用于计算和定位弹出层和浮动菜单的库。
和原版的 Popper.js 相比，@clbn/popper.js 具有更好的性能和更低的内存占用。另外，它还提供了一些新的功能和选项，例如生成阴影遮罩、禁用默认的交互事件等。
@clbn/popper.js 安装
你可以使用 npm 安装 @clbn/popper.js：
--- ------- ---------------
安装成功后，你可以在项目中引入它：
------ ------ ---- ------------------
@clbn/popper.js 使用
使用 @clbn/popper.js 生成弹出层的具体步骤如下：
1. 准备目标元素和弹出层
首先，你需要准备你的目标元素和弹出层。目标元素是弹出层的触发器，而弹出层是你要定位的元素。
------------- ----------- ------- -----------
2. 初始化 Popper 实例
在使用 @clbn/popper.js 之前，你需要先初始化一个 Popper 实例，通过传入目标元素和弹出层元素：
----- ------- - --------------------------------- ----- ----- - ------------------------------ ----- ------ - --- --------------- -------
当你完成了以上步骤，你会看到弹出层已经固定在目标元素的下方，这是因为 Popper 默认会把弹出层放在目标元素下方、居中对齐。如果你想要改变它的位置，可以使用下面的选项。
3. 自定义选项
你可以手动设置弹出层相对于目标元素的位置，例如：
----- ------ - --- --------------- ------ - ---------- ----- ---
这里我们把弹出层放在目标元素上方。placement 这个选项也可以设置为 'right'、'bottom' 和 'left'。
然而，仅仅使用 placement 并不能得到你想要的完美位置。在一些复杂场景下，你可能需要更细致地控制弹出层的位置，这时候你就需要手动设置偏移量：
----- ------ - --- --------------- ------ -
---------- ---------
---------- -
------- -
------- --- ---
-
-
---最后的结果是把弹出层放在目标元素的下方，并向下偏移 10 个像素。你还可以设置多个偏移量，例如："1px, 2px"。
4. 更新 Popper 实例
在一些场景下，你需要弹出层实时更新它的位置，例如在窗口大小发生变化时。为了实现这个需求，你需要手动更新 Popper 实例：
--------------------------------- -- -- - ---------------- ---
注意，如果你在给 poper 传入节点时使用的是引用，而不是一个定位元素的 string，应使用刷新( refresh )而不是 更新( update )。
@clbn/popper.js 示例代码
---- ------------------
------- --------------------- -----------
---- ---------------- -----------
------
------- -----------------------------------------------------------------
--------
----- ------- - -----------------------------------
----- ----- - ---------------------------------
----- ------ - --- --------------- ------ -
---------- ---------
---------- -
------- -
------- --- ---
-
-
---
---------总结
@clbn/popper.js 是一个非常好用的弹出层定位库。它可以帮助我们准确定位弹出、浮动、下拉式菜单等元素的位置，并提供多种选项对元素位置进行控制。在实际开发中，我们应该充分利用 @clbn/popper.js 的灵活性和强大功能，提升我们的 Web 开发效率和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600568d881e8991b448e49b2