前言
Ember.js 是一个流行的 JavaScript 前端框架，旨在提高开发者效率，特别是在构建大型 web 应用程序时。Ember-Popper 是一个 Ember.js 组件，它提供了对 Popper.js 库的集成，使用 Popper.js 实现弹出框、下拉菜单等交互组件非常方便。
在本文中，我们会对 Ember-Popper 进行详细介绍，并展示如何在 Ember.js 应用程序中使用它。
什么是 Popper.js
Popper.js 是一个弹出框和 tooltip 库，它使用现代 web 浏览器（包括 IE 11）的原生 API，如 getBoundingClientRect() 和 requestAnimationFrame()。它是一个项目感知的库，用于在页面布局和内容之间精确定位弹出框。
Ember-Popper 是什么
Ember-Popper 是一个 Ember.js 附加组件，提供对 Popper.js 库的集成，并为创建自定义交互组件提供了一流的支持。它可以用于创建下拉菜单、Popover 等交互组件。
如何安装
要使用 Ember-Popper，您需要先安装它。您可以使用以下命令在 Ember.js 应用程序中进行安装：
ember install ember-popper
安装后，您可以使用 ember-popover 组件创建弹出框。
如何使用
要在 Ember.js 应用程序中使用 Ember-Popper，您需要在模板中使用 ember-popover 组件。在以下示例中，我们向用户展示如何使用 Ember-Popper 创建一个下拉菜单：
<EmberPopper @triggerType="click" as |popover|>
<button {{on popover.toggle}}>菜单</button>
<AffinityEnginePopoverMenu @popover={{popover}} />
</EmberPopper>在上面的示例中，我们使用 ember-popover 组件包装了一个按钮，并将 $triggerType 属性设置为 click。当用户点击按钮时，下拉菜单出现在页面上。当用户再次单击按钮时，下拉菜单消失。
弹出窗口的内容嵌套在 EmberPopper 组件中。我们使用了 as |popover| 命名的块参数，并在 AffinityEnginePopoverMenu 组件中将它传递给 @popover 属性。这些组件在我们下面将展示如何创建。
Ember-Popper API
在使用 Ember-Popper 时，您需要了解以下属性和方法：
属性
@triggerType：弹出框的触发方式。可选值有click、hover和focus。@popperPlacement：弹出框和触发器之间的位置关系。可选值有top-start，top，top-end，left-start，left，left-end，right-start，right，right-end，bottom-start，bottom，bottom-end。@popperModifiers：Popper.js 的修改器数组。这些修改器可以在 Popper.js 中进行配置。@onToggle：每次弹出框打开或关闭时都会执行的函数。@onUpdate：每次 Popper.js 更新位置时都会执行的函数。@delayShow：在弹出框出现之前，等待多少毫秒。@delayHide：弹出框隐藏之前等待多少毫秒。@showOnRender：设置为true，表示弹出框应该在它第一次渲染时就显示。@hideOnRender：设置为true，表示弹出框应该在它第一次渲染时就隐藏。@tagName：弹出框的 HTML 标签名称。默认为div。
方法
show(): 显示弹出框。hide(): 隐藏弹出框。toggle(): 在显示和隐藏之间切换弹出框。update(): 更新位置和大小。
创建自定义组件
除了使用 Ember-Popper 中提供的弹出框组件之外，您还可以根据自己的需求创建自定义组件。接下来，我们将介绍如何使用 Ember-Popper 创建一个下拉菜单组件：
{{!-- app/components/affinity-engine-popover-menu.hbs --}}
<ul>
{{#each @options as |option|}}
<li>{{option.label}}</li>
{{/each}}
</ul>在上面的示例中，我们创建了一个简单的列表，其中菜单项在传递的 @options 属性中定义。
接下来，我们将创建一个叫做 AffinityEnginePopoverMenu 的 Ember.js 组件，用于显示该列表：
-- -------------------- ---- -------
-- ----------------------------------------------
------ --------- ---- ---------------------
------ ------- ----- ---------------------------------- ------- --------- -
------------- -
--------------------
------------ - ------
-
--- --------- -
------ ----------------- - ------------------------- - ---
-
-------- -
-- -------------- -
-------------------------
------------ - ------
- ---- -
-------------------------
------------ - -----
-
-
-在 AffinityEnginePopoverMenu 组件中，我们使用了一个名为 isShown 的私有属性来跟踪该组件的显示状态，并将 options 属性定义为此组件所需的数据。
另外，我们还创建了一个 toggle() 方法，该方法用于切换弹出菜单的显示状态，并且该方法是由我们上面使用的 ember-popover 组件中的按钮触发的。
结论
Ember-Popper 是一个优秀的弹出框和交互组件库，它简化了弹出框和 tooltip 的创建和管理。本文介绍了如何在 Ember.js 应用程序中使用 Ember-Popper，如何创建自定义交互组件。
我们希望您能够通过本文对 Ember-Popper 有更深入的了解，并在实际开发中灵活应用。如果您有任何疑问或问题，请在下方评论区留言，我们会尽快回复您。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa3db5cbfe1ea06103e0