问题标签 [tether]

我正在使用 Vuejs 和 Drop.js（它使用 Tether.js）。如果它们不存在，Drop 创建它自己的 DOM 元素。

我为下拉内容创建了一个模板（单击按钮时添加到下拉列表中）

我正在尝试收听下拉列表中按钮的单击事件。

我Vue用elasbody标签创建了一个新的。这不起作用。如何使用 vuejs 监听动态添加的 dom 元素的点击？

在我的模板中，我有一个 div 我想用作各种工具提示。选择模型后，工具提示会显示，然后我使用系绳将其放置在正确的位置。如果我在设置使元素显示的模型后立即设置系绳，则它的大小没有正确计算，并且系绳没有正确限制约束。如果我用 setTimeout 去抖动它，我可以把它放在正确的地方，但这感觉很糟糕。我的问题：

在 show.bind 使元素可见之后，我可以附加某种回调机制吗？

我的模板：

设置模型并调用 Tether 的函数：

谢谢！

我想使用 Zurb Foundation for Apps 的弹出功能（Zurb 的弹出文档），它使用了 Tether（GitHub 上的 Tether）。我尝试使用 GitHub 上的配置：

我在我的 Angular JS 指令中运行它。但是，我在 tether.min.js 中收到 JavaScript 错误（错误：t 为空）。该错误消息不是很有帮助。

Zurb 的文档没有说明如何配置弹出窗口。我希望弹出窗口发生在单击以打开弹出窗口的元素的右侧。

谢谢你的帮助。

我的 package.json 文件中有以下内容：

然后在我的一个 JS 模块中：

然后我在浏览器中收到以下错误：

tether.min.js:1 未捕获类型错误：无法设置未定义的属性“系绳”

但是，如果我不尝试填充 Tether 而只是window.Tether在需要它的模块中使用它，它就可以正常工作。

有谁知道为什么 browserify-shim 不能以这种方式为 Tether 工作？

系绳文档没有说明如何使其运行（仅bower install tether下载全部）。对于 JS 来说很清楚，因为 repo 的 dist 文件夹中只有一个相关文件。

但是https://github.com/HubSpot/tether/tree/master/dist/css需要哪些文件？够tether.min.css了，还是tether-theme-basic.min.css还需要？

Bootstrap 4 使用 tether.js 作为位置，但是它只支持 4 个位置，“top”“right”“bottom”“left”，我怎样才能扩展到更多选项，tether 支持其中的 12 个？例如“左上角”或“右上角”

我正在尝试将Bootstrap 4添加到Aurelia. 我只能让CSS工作，但bootstrap.js需要Tether，我不能把它包括在内，因为我在控制台中不断收到这个错误：

我尝试了一些东西

它确实捆绑了，但它仍然抱怨缺少Tether. 我读到另一个堆栈答案 ，我必须available globally which could be done via用这个来制作Tether requirejs.config.js`

但是没有这样的配置Aurelia。

描述

我有一个可能在 react-virtualized 中呈现的项目列表VirtualScroll。
列表中的每个项目（行）都有相当多的元素，其中一个会打开上下文菜单。我正在尝试使用react-tether在 HTML 上呈现该菜单body（以便当项目位于可滚动列表的底部/顶部时它不会隐藏）并在用户滚动列表时将菜单“卡在”我的项目上.
我的问题是更新绑定菜单的位置有明显的滞后。

到目前为止我采取的一些步骤：

1. 呈现了一个简单的列表，没有VirtualScroll. 系留菜单呈现流畅，没有明显的卡顿。这就是我得出的结论是问题出在react-virtualized
2. 按照此处的建议，将我rowRenderer的简化为仅菜单触发器。
3. 在行组件中实现shouldComponentUpdate。这大大提高了感知性能，大大减少了延迟，但仍然很明显。
4. 检查了 Chrome devtools 的时间线。Grid.js我看到由和触发的回流tether.js。

库版本：

• react-virtualized v. 7.24.3（大型项目，尚未准备好迈向 8.x 的步骤）
• 反应系绳 v. 0.5.2
• 反应 v. 15.2.1

工作演示

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

截屏：

我一直在玩很棒的插件：tether

手动加载引导（v3）弹出窗口时遇到问题，视口外的弹出窗口将显示在视口底部的错误位置。所以我决定尝试使用这个插件作为替代方案。

我一直在尝试使用基本的系绳选项来验证我的表单中的一个输入，该表单是使用 laravel 表单生成器制作的。（form-group输入是目标元素）。

问题：

但由于某种原因，它似乎加载到目标元素的左侧（位置不正确）。当视口发生变化（页面调整大小或滚动等）时，它会更新到目标元素的右侧（在正确的位置）。

我不知道为什么会这样，关于如何让它加载到正确位置的任何想法？

例子：

页面加载（位置不正确）：

视口变化（正确位置）：

HTML：

JAVASCRIPT：

我很难弄清楚如何使用使用 angular-cli@1.0.0-beta.24 创建的 angular 2 应用程序设置系绳下降。

重现步骤：

1. 使用 angular-cli 创建一个新项目。
   • ng new tester --skip-git
2. 按照 angular-cli 说明安装第三方库：
   • npm install tether-drop --save
   • npm install @types/tether-drop --save
3. 在这一点上，我完全希望能够在 app.component.ts 中使用以下行
   • import { Drop } from 'tether-drop';

但是当我ng serve的结果是这个错误：

• ERROR in ./src/app/app.component.ts Module build failed: Error: D:/Visual Studio Code/tester/src/app/app.component.ts (3,10): Module '"D:/Visual Studio Code/tester/node_modules/@types/tether-drop/index"' has no exported member 'Drop'.) at _checkDiagnostics (D:\Visual Studio Code\tester\node_modules\@ngtools\webpack\src\loader.js:116:15) at D:\Visual Studio Code\tester\node_modules\@ngtools\webpack\src\loader.js:141:17 @ ./src/app/app.module.ts 14:0-47 @ ./src/main.ts @ multi main

我一直在努力将第三方库集成到 angular-cli 生成的项目（webpack）中。我设法让他们中的一些人工作，但这个解决方案正在暗示我。

有人可以启发我并消除我的无知负担吗？