简介
在前端开发中，我们经常会使用一些弹出框、下拉菜单等组件，这时我们就需要使用到弹出层组件。Popper.js 是一个轻量级的工具库，可用于弹出层和下拉菜单等组件的实现。
安装
我们可以通过 npm 来安装 Popper.js：
npm install @philetsich/popper.js --save
使用
在使用 Popper.js 之前，我们需要引入它的 JavaScript 文件。
<script src="node_modules/@philetsich/popper.js/dist/popper.js"></script>
创建一个弹出层
我们可以使用 Popper.js 创建一个简单的弹出层。
首先，我们需要在 HTML 中定义一个触发元素和一个弹出层元素：
<button type="button" id="btn">点击弹出</button> <div id="popover" role="tooltip"> 这是一个弹出层 </div>
然后，在 JavaScript 中创建 Popper 实例：
import Popper from '@philetsich/popper.js';
const btn = document.querySelector('#btn');
const popover = document.querySelector('#popover');
new Popper(btn, popover, {
placement: 'top',
});上面的代码将在按钮点击时弹出弹出层。
可选配置
Popper.js 提供了丰富的配置选项，可以满足我们不同的需求。
配置选项
以下是 Popper.js 的配置选项：
placement：位置，可选值为'top'、'bottom'、'left'和'right'。modifiers：自定义修饰符。onCreate：在创建新实例时触发的回调函数。onUpdate：每次更新实例时触发的回调函数。removeOnDestroy：当 Popper 实例被销毁时，是否从 DOM 中删除 popper 元素。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------- ------------- ----------------------
---- ------------ ---------------
-------
------
------- -----------------------------------------------------------------
--------
------ ------ ---- ------------------------
----- --- - -------------------------------
----- ------- - -----------------------------------
--- ----------- -------- -
---------- ------
---------- -
------ -
-------- ---------
--
-------- -
---- ---
------- ---
----- ---
------ ---
--
---------------- -
-------- -----
------------------ -----------
--
--
--------- -- -- -
------------------- ----------
--
--------- -- -- -
------------------- ----------
--
---------------- -----
---
---------总结
Popper.js 是一个好用的弹出层组件，可以快速地实现各种组件的弹出功能。本文介绍了 Popper.js 的使用方法和配置选项，希望能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5d51ab1864dac67122