简介
popper.js 是一个轻量级的、用于处理弹出框定位的 JavaScript 库，它可以方便地计算出弹出框在页面中的位置，以避免被其他元素遮挡。在前端开发中，经常需要使用弹出框来展示提示信息、下拉菜单等功能，而 popper.js 可以帮助我们简化这个过程。
本文将详细介绍如何使用 popper.js 实现弹出框定位，并提供代码示例和指导意义。
安装
在使用 popper.js 之前，你需要先安装它。可以使用 npm 来进行安装：
--- ------- --------- ------
使用方法
引入
在使用 popper.js 前，需要先引入它。可以通过以下方式引入：
------ ------ ---- ------------
或者直接引入 popper.min.js 文件：
------- ------------------------------------------------------------------
实例化
使用 popper.js 的第一步是实例化一个 Popper 对象。实例化时需要传入两个参数：目标元素和弹出框元素。
----- ------ - ---------------------------------- ----- ----- - --------------------------------- ----- ------ - --- -------------- -------
上面的代码中，target 是目标元素，即触发弹出框的元素；popup 是弹出框元素。通过实例化 Popper 对象，可以根据这两个元素的位置计算出弹出框应该出现的位置。
配置选项
在实例化 Popper 对象时，可以传入一些配置选项，以调整弹出框的位置。常用的配置选项包括：
placement：弹出框出现的位置，默认为'bottom'；modifiers：用于修改弹出框的行为和样式；onCreate和onUpdate：在创建和更新弹出框时调用的函数。
下面是一个示例：
----- ------ - --- -------------- ------ -
---------- --------
---------- -
----- -
--------- --------- ------- --------- -------
--
---------------- -
------------------ -----------
--
--
--------- -- -- -
------------------- ----------
--
--------- -- -- -
------------------- ----------
--
---在上面的代码中，我们将弹出框放在目标元素的右边，并指定了一些修改器，如 flip 和 preventOverflow，以确保弹出框不会被遮挡。此外，还定义了 onCreate 和 onUpdate 函数，在创建和更新弹出框时分别会被调用。
示例
下面是一个完整的示例，展示了如何使用 popper.js 实现一个带有弹出框的按钮。点击按钮时，弹出框会显示在按钮下方。
--------- -----
------
------
---------------- ------------
----- ---------------- --------------------------------------------------------------
------- ------------------------------------------------------
-------
------
---- ---------------- ------
------------- ---------
------- -------- ------------- ---------- ------------------ ------------
---- ---------- ----------- ----- --------------- -------
---- ------------------
---- -- - ------
------
------
------
--------
-----
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------