2

我正在尝试tether和vue 2.2.1一起使用。这是一个 jsfiddle 示例：https ://jsfiddle.net/awei01/fwttsa6o/2/

（我认为）做什么tether：

  • 如果 tethered DOM 节点在正常文档流中（不是position: absolute），tether代码将简单地添加一些样式属性来正确定位 tethered 元素

  • 如果 tethered DOM 节点有position: absolute，tether将移动 tethered DOM 节点并将其放置为body. 这给vue. 具体来说，抛出异常：DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

我试图通过摆弄组件的生命周期钩子来解决这个问题beforeDestroy，destroyed但Popup它似乎没有帮助。

react我可以通过简单地将绑定的 DOM 元素移回其在componentWillUnmount生命周期钩子上的原始位置来解决这个问题。

我想知道解决这个问题的最佳方法是什么vue。我的另一个想法是抢先插入一个新的 DOM 节点body并强制Popup组件使用该节点进行渲染，但我不知道该怎么做。

任何建议表示赞赏。谢谢

4

1 回答 1

0

从 更改v-if为v-show似乎可以解决问题。

<popup v-show="popup1" target="anchor1">
    Some popup content
</popup>
于 2017-03-14T18:27:54.857 回答