介绍
primer-popover 是一款基于 popper.js 构建的为网页添加弹出框的 npm 包，是 GitHub Primer 样式库的一部分。通过 primer-popover，我们可以在网页中添加可自定义的、方便灵活的弹出框。
安装
使用 npm 安装：
npm install primer-popover
使用
在引入 primer-popover 之前，需要先引入 popper.js：
<script src="https://unpkg.com/popper.js@1.14.3/dist/umd/popper.min.js"></script>
然后，在需要使用弹出框的元素上，添加 data-popover 接口，并指定弹出框的内容：
<button data-popover="I am a popover!">Click me!</button>
最后，在 JavaScript 中引入 primer-popover 并实例化：
import Popover from 'primer-popover';
document.addEventListener('DOMContentLoaded', () => {
const popoverTriggers = Array.from(document.querySelectorAll('[data-popover]'));
popoverTriggers.forEach(popoverTrigger => {
new Popover(popoverTrigger);
});
});选项
我们可以传入选项来进行更细节的弹出框控制，下面列举了可用的选项：
content：弹出框的内容。默认值为null；template：弹出框的 HTML 模板。默认值为<div class="Popover"><div class="Popover-message"></div></div>；placement：弹出框出现的位置。可用值为top、bottom、left和right。默认值为bottom；padding：弹出框与目标元素的间距。默认值为 6；class：弹出框的自定义类名。默认值为空字符串；onShow：当弹出框显示时运行的回调函数。默认值为function () {}；onHide：当弹出框隐藏时运行的回调函数。默认值为function () {}。
示例
下面给出一个示例，展示如何使用 primer-popover 自定义弹出框：
<button data-popover="Check out my awesome popover!" data-placement="right" data-padding="20" data-popover-class="my-custom-class">Click me!</button>
-- -------------------- ---- -------
------ ------- ---- -----------------
--------------------------------------------- -- -- -
----- --------------- - --------------------------------------------------------
-------------------------------------- -- -
--- ----------------------- -
-------- --------------------------------------------
---------- ----------------------------------------------
-------- --------------------------------------------
------ --------------------------------------------------
------- -- -- -
-------------------- ---------
--
------- -- -- -
-------------------- ----------
-
---
---
---结语
primer-popover 为我们提供了方便快捷的弹出框解决方案。我们可以根据自己的需求进行调整和定制，为我们的网页添加更为引人注目的内容展示方式。希望这篇介绍能帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3e7d4ddbf7be33b2567180