在 dom 内移动 Vue 组件？答案

【问题标题】：Moving Vue components around inside the dom?在 dom 内移动 Vue 组件？
【发布时间】：2017-12-23 07:59:30
【问题描述】：

如果我在移动设备上，我会在 dom 中向上移动 Vue 组件，因为我想使用绝对定位并想确保我不在 relative 容器内。

if (this.mobile) {
    this.$el.parentNode.removeChild(this.$el);
    document.getElementById('vue').appendChild(this.$el);
} else {
    // Place the element back at it's original location.
}

此代码使用去抖动的resize 方法放置，因此它也适用于调整窗口大小。

它工作正常，但是当我开始使用移动设备并将大小调整回桌面时，我需要获取组件首次初始化的原始 dom 位置。

这可能是一个 Javascript 唯一的问题，但我怎样才能得到这个组件的确切 dom 位置的原始位置，以便我可以再次放回它？

编辑

我将初始父元素保存为：

this.parent = this.$el.parentElement;

虽然当我再次将元素附加回 parentElement 时，但这并不能保证父元素中的正确顺序。

【问题讨论】：

我会在原始位置放置一个隐藏的标记元素，当您将元素移回时可以替换它。（但在此之前，我会看看我是否可以重构设计以不需要重新排列 DOM...）
@DanielBeck 听起来是个好主意。设计无法更改，我需要全屏覆盖，而固定位置对于这个来说太麻烦了。因此，我需要使用绝对位置，但我还需要确保它不在相对容器内。恐怕没有其他选择了。
很公平！另一种方法是根据窗口大小只使用具有v-if 的重复组件；这可能比手动重新排列 DOM 更好
你不应该这样做。您应该使用媒体查询来根据特定视口大小设置样式。
这应该是一个 CSS 问题，如果 position fixed 没有在 Safari Mobile 和其他移动浏览器中出现错误，则可以在 2 分钟内解决。不幸的是，这变成了一个 JS 问题。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您只想将原始parentNode 保存一次，并在需要时使用它。像这样的东西应该可以工作。根据您的设置，您可能需要将 insertBefore 与 Daniel Beck 的隐藏标记想法一起使用。

if (!this.originalParentNode) {
    this.originalParentNode = this.$el.parentNode;
}
if (this.mobile) {
    this.$el.parentNode.removeChild(this.$el);
    document.getElementById('vue').appendChild(this.$el);
} else {
    // Place the element back at its original location.
    this.originalParentNode.appendChild(this.$el);
}

【讨论】：