npm 包 popper 使用教程
什么是 popper？
Popper 是一个特别实用的工具库，它从弹出窗口到提示浮层等各种功能，都可以通过它来完成。由于其兼容性以及易用性，越来越多的前端工程师开始尝试使用 Popper。
Popper 的使用很简单，但有一些注意点需要掌握。
安装 popper 包
首先，我们需要使用 npm 工具来安装 popper 包。
npm install popper
执行以上命令后，就可以在项目中使用 popper 包了。
如何使用 popper
使用 popper 主要分为 3 个步骤：
- 引入 Popper 工具；
- 创建元素，即需要将弹窗、提示等放在元素中；
- 实例化 Popper 工具。
引入 Popper 工具
在使用 Popper 前，需要将 Popper 工具引入到我们的项目中。我们可以使用如下方式：
import Popper from 'popper';
创建元素
创建元素是我们接下来要做的一步。我们可以在项目中创建一个 HTML 文件，包含要弹出的元素。
HTML 文件的代码如下：
<div id="popper-container">
<button type="button">弹出</button>
<div class="popper-content">
这是一个简单的弹出窗口。
</div>
</div>实例化 Popper 工具
我们需要实例化 Popper 工具，将其应用到元素中。
const button = document.querySelector('button');
const popperElement = document.querySelector('.popper-content');
new Popper(button, popperElement);以上代码的含义是将 popperElement 元素与 button 元素关联起来，然后使用 Popper 工具将弹窗显示在 button 元素上。
Popper 的配置参数
上面我们只是使用了简单的示例，但是在实际开发中，Popper 还有很多配置参数可以使用。下面我们来介绍一些常用的参数。
placement
placement 参数用于配置弹窗在相对于目标元素的位置。这个参数可以有以下值：
- top
- bottom
- left
- right
- top-start
- top-end
- bottom-start
- bottom-end
- left-start
- left-end
- right-start
- right-end
下面是一个设置 placement 参数的例子：
new Popper(button, popperElement, {
placement: 'top'
});modifiers
modifiers 参数可以为弹窗添加一些附加功能，比如限制宽度、设置相对于目标元素的偏移量等。
我们可以使用如下代码设置 modifiers 参数：
-- -------------------- ---- -------
--- -------------- -------------- -
---------- -
---------------- -
-------- -----
------------------ ----------
--
------- -
-------- -----
------- --- ---
--
------ -
-------- -----
-------- ---------------
-
-
---以上代码的含义是：
- preventOverflow 规定弹窗永远不会超出可以视野范围内的区域。
- offset 规定弹窗相对于目标元素偏移 0 像素水平，10 像素垂直。
- arrow 规定 popper 的箭头。
示例代码
下面是一个完整的示例代码：
HTML：
<div id="popper-container">
<button type="button">弹出</button>
<div class="popper-content">
这是一个简单的弹出窗口。
<div class="popper-arrow"></div>
</div>
</div>JavaScript：
-- -------------------- ---- -------
------ ------ ---- ---------
----- ------ - ---------------------------------
----- ------------- - ------------------------------------------
--- -------------- -------------- -
---------- ------
---------- -
---------------- -
-------- -----
------------------ ----------
--
------- -
-------- -----
------- --- ---
--
------ -
-------- -----
-------- ---------------
-
-
---结论
通过这篇文章，我们已经学习了如何使用 Popper 工具来实现一个简单的弹出窗口，并且还介绍了一些常用的参数。希望这篇文章对于您的前端开发会有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/popper