npm 包 @clbn/popper.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代的 Web 开发中，弹出层的使用非常普遍。而要实现弹出层，有一个重要的前置操作：计算弹出层的位置，以使其准确地出现在指定的位置。这就是所谓的 popper。在本文中，我将介绍一个弹出层定位库——@clbn/popper.js 的使用方式。

什么是 popper？

在开始讲解 @clbn/popper.js 之前，我们需要先理解什么是 popper。

Popper，全称为 Popper.js，是一个轻量的、非侵入式的用于计算弹出层位置的库，它可以帮助我们把一个弹出层准确定位到特定的目标元素旁。

@clbn/popper.js 是什么？

@clbn/popper.js 是 Popper.js 的一个 fork 版本，它由 @clbn 团队维护。它是一种轻量的、可用于计算和定位弹出层和浮动菜单的库。

和原版的 Popper.js 相比，@clbn/popper.js 具有更好的性能和更低的内存占用。另外，它还提供了一些新的功能和选项，例如生成阴影遮罩、禁用默认的交互事件等。

@clbn/popper.js 安装

你可以使用 npm 安装 @clbn/popper.js：

npm install @clbn/popper.js

安装成功后，你可以在项目中引入它：

import Popper from '@clbn/popper.js';

@clbn/popper.js 使用

使用 @clbn/popper.js 生成弹出层的具体步骤如下：

1. 准备目标元素和弹出层

首先，你需要准备你的目标元素和弹出层。目标元素是弹出层的触发器，而弹出层是你要定位的元素。

<button>Click me</button>
<div>My popup</div>

2. 初始化 Popper 实例

在使用 @clbn/popper.js 之前，你需要先初始化一个 Popper 实例，通过传入目标元素和弹出层元素：

const trigger = document.querySelector('button');
const popup = document.querySelector('div');

const popper = new Popper(trigger, popup);

当你完成了以上步骤，你会看到弹出层已经固定在目标元素的下方，这是因为 Popper 默认会把弹出层放在目标元素下方、居中对齐。如果你想要改变它的位置，可以使用下面的选项。

3. 自定义选项

你可以手动设置弹出层相对于目标元素的位置，例如：

const popper = new Popper(trigger, popup, {
  placement: 'top'
});

这里我们把弹出层放在目标元素上方。placement 这个选项也可以设置为 'right'、'bottom' 和 'left'。

然而，仅仅使用 placement 并不能得到你想要的完美位置。在一些复杂场景下，你可能需要更细致地控制弹出层的位置，这时候你就需要手动设置偏移量：

const popper = new Popper(trigger, popup, {
  placement: 'bottom',
  modifiers: {
    offset: {
      offset: '0, 10'
    }
  }
});

最后的结果是把弹出层放在目标元素的下方，并向下偏移 10 个像素。你还可以设置多个偏移量，例如："1px, 2px"。

4. 更新 Popper 实例

在一些场景下，你需要弹出层实时更新它的位置，例如在窗口大小发生变化时。为了实现这个需求，你需要手动更新 Popper 实例：

window.addEventListener('resize', () => {
  popper.update();
});

注意，如果你在给 poper 传入节点时使用的是引用，而不是一个定位元素的 string，应使用刷新( refresh )而不是更新( update )。

@clbn/popper.js 示例代码

-- -------------------- ---- -------
---- ------------------
  ------- --------------------- -----------
  ---- ---------------- -----------
------

------- -----------------------------------------------------------------
--------
  ----- ------- - -----------------------------------
  ----- ----- - ---------------------------------

  ----- ------ - --- --------------- ------ -
    ---------- ---------
    ---------- -
      ------- -
        ------- --- ---
      -
    -
  ---
---------

总结

@clbn/popper.js 是一个非常好用的弹出层定位库。它可以帮助我们准确定位弹出、浮动、下拉式菜单等元素的位置，并提供多种选项对元素位置进行控制。在实际开发中，我们应该充分利用 @clbn/popper.js 的灵活性和强大功能，提升我们的 Web 开发效率和用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600568d881e8991b448e49b2