在前端开发过程中，经常需要使用弹出框、下拉框等 UI 控件。这些控件需要正确的定位才能在页面上正确的展示。而定位又是一个非常复杂的过程，需要考虑到目标元素在页面的位置、大小、滚动条等因素，并且要考虑到不同浏览器的兼容性等问题。为了解决这个问题，有很多 JS 库提供了相应的解决方案。其中，@popperjs/core 就是其中的一个比较优秀的库。
@popperjs/core 是一个基于 Popper.js 的库，它提供了通用的定位方案，支持弹出框、下拉框等 UI 控件的定位。@popperjs/core 官方网站是：https://popper.js.org/
本文将介绍如何使用 @popperjs/core，包括如何安装、如何使用、常用的配置参数等。同时，本文还将给出一些示例代码，让读者更好地理解如何使用此库。
安装
@popperjs/core 可以通过 npm 安装。打开命令行终端，执行以下命令：
npm install @popperjs/core
使用
使用 @popperjs/core 的过程主要包括以下几个步骤：
- 引入库
在 HTML 文件中引入 @popperjs/core 库，可以通过以下方式：
<script src="https://unpkg.com/@popperjs/core@2.10.3/dist/core.min.js"></script>
也可以使用模块方式引入：
import { createPopper } from '@popperjs/core';- 创建 Popper 实例
通过 createPopper 方法创建 Popper 实例。createPopper 接收两个参数，第一个是目标元素（被定位的元素），第二个是引导元素（定位的参考元素）。
const instance = createPopper(targetElement, guideElement);
- 配置 Popper 实例
Popper 实例可以通过配置参数进行配置，包括定位方式、偏移量、边界限制等。常用的配置参数包括：
- placement: 定义目标元素相对于引导元素的哪个边界进行定位；
- modifiers.offset: 定义偏移量；
- modifiers.preventOverflow: 定义边界限制。
-- -------------------- ---- -------
----- -------- - --------------------------- ------------- -
---------- ---------------
---------- -
-
----- ---------
-------- -
------- --- ---
-
--
-
----- ------------------
-------- -
--------- -----
-------- ------
-------- --
-
-
-
---- 销毁 Popper 实例
当 Popper 实例不再需要使用时，可以通过 destroy 方法销毁。
instance.destroy();
示例代码
接下来给出一个完整的示例代码，用于演示如何使用 @popperjs/core。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ------------
-------
------
------- -----------------------
---- ----------- ------------------------------
------- ------------------------------------------------------------------------
--------
----- ---------- - -------------------------------
----- ------------- - ----------------------------------
--- ---------
-------- ------------ -
-- ----------- -
-------- - ------------------------ -------------- -
---------- ---------------
---------- -
-
----- ---------
-------- -
------- --- ---
-
--
-
----- ------------------
-------- -
--------- -----
-------- ------
-------- --
-
-
-
---
-
--------------------------- - --------
-
-------- ------------ -
--------------------------- - -------
-
---------------------------------------- ------------
--------------------------------------- ------------
---------
-------
-------上述代码中，当用户鼠标移动到按钮上时，会创建 Popper 实例并显示弹出框。当用户鼠标移开按钮时，弹出框又会隐藏，并销毁 Popper 实例。在创建 Popper 实例时，设置了定位方式为“底部居左”，偏移量为“10 像素”且边界限制为“仅进行主轴限制且边界留出 10 像素的空白”。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb056b5cbfe1ea06110c9