前端框架 Ember.js 具备强大的模板与组件化开发能力，同时还内嵌了许多功能强大的插件和扩展。其中，ember-tether 就是一款优秀的插件，可以让开发者在应用中方便地实现基于 Tether.js 的 tooltips 与 popover 等交互效果。本文将详细介绍如何使用 ember-tether 套件，以及解析其中的技术原理。
简介与安装
ember-tether 套件的原理是基于 Tether.js 实现的。Tether.js 是一个简单的定位引擎，可用于创建出具有吸附性质的 DOM 元素。如其名称之意，它的定位逻辑是通过“连接线（tether）”的方式，通过两个点的定位来决定内容元素的位置。ember-tether 套件通过对 Tether.js 进行封装，为 Ember.js 应用开发者提供了一组现成的组件，以实现 tooltip 与 popover 的效果。
要在你的项目中使用 ember-tether 套件，首先需要在命令行中执行以下 npm 安装命令：
npm install ember-tether
组件使用
在安装完成后，即可在 Ember.js 应用的组件中调用 ember-tether 的各项函数。下面将分别介绍 tooltip 和 popover 的使用方法。
Tooltip
在模板文件中，需要使用 {{ember-tether-popover}} 标签来包裹内容元素，在其中通过 text="" 这个属性来定义 tooltip 的文本内容。
{{#ember-tether-tooltip targetElement=buttonEle text="这是一个提示" }} <button id="demoButton"> 显示提示 </button> {{/ember-tether-tooltip}}
在 JS 文件中，需要定义组件函数，调用 tetherOptions 函数定义定位参数。这里可以通过 attachment 以及targetAttachment 属性来设置定位方式（相对于目标元素的对齐方式）。完整的 JS 代码如下所示：
-- -------------------- ---- ------- ------ --------- ---- ------------------- ------ - ------ - ---- ---------------- ------ - ------------------- - ---- --------------- ------ ------- ----- ------- ------------------------------------- - ------- ------------ - --- ------------- - - ------- -------------------------- ----------- ---- -------- ----------------- ------- ------- -- -------------------------------- - ------- -------------- - --------------------- - -展开代码
Popover
Popover 组件与 Javascript 的事件绑定有着密不可分的关系。在模板中，需要使用 {{action}} 标签定义事件触发的函数名，并使用 {{ember-tether-popover}} 标签包裹元素，在其中通过 class="hide" 将内容元素隐藏（这里假设我们的 popover 元素具有 .box 类名）。
-- -------------------- ---- ------- ------- --------------- -------- -------------- ------ ------- --------- ----------------------- ----------------- ----------------------- --------------- -- ---- ---------- ------ -------- ------ -------------------------展开代码
在定义事件触发函数时，需要使用 toggleBox 这个函数名，并在函数中调用 hidePopover 以及 showPopover 函数，控制 Popover 是否显示。
-- -------------------- ---- ------- ------ --------- ---- ------------------- ------ - ------ - ---- ---------------- ------ - ---- - ---- ----------------- ------ - ------------------- - ---- --------------- ------ ------- ----- ------- ------------------------------------- - ------- ------------ - --- ------------- - - ------- -------------------------- ----------- ---- -------- ----------------- ------- ------- -- -------------------------------- - ------- -------------- - --------------------- - ------- ----------- - --- --- - ----------------------------------- -- -------------------------------- - ------------------- ----------------------------- - ---- - ------------------- -------------------------- - ---------- ---------------------- - -展开代码
总结
本文中，我们详细介绍了如何使用 ember-tether 套件实现 tooltip 与 popover 的效果，以及相应的技术原理。在使用 ember-tether 套件时，需要将组件函数与模板文件中的调用方法结合使用。除了 tooltip 与 popover 外，ember-tether 套件还可用于定义其他效果，如 pop-up 连接框等。通过本文的学习，相信大家已经对 ember-tether 的使用方法有了更加深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60087
