在 dom 内移动 Vue 组件? [英] Moving Vue components around inside the dom?

问题描述

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

I am moving Vue components up in the dom if I am on mobile since I want to use positioning absolute and want to make sure I am not within a relative container.

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 方法放置，因此它也适用于调整窗口大小.

This code is placed with a debounced resize method so it also works on resizing of the window.

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

It works fine but when I start out on mobile and resize back to desktop I need to get the original dom location of where the component was first initialized.

这可能是一个 Javascript 唯一的问题，但我怎样才能获得该组件的确切 dom 位置的原始位置，以便我可以再次将其放回原处?

This might be a Javascript only question but how can I get the original location of the exact dom position of this component so I can place it back again?

编辑

我正在保存初始父元素:

I am saving the initial parent element with:

this.parent = this.$el.parentElement;

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

This does not guarantee the right order in the parent element though when I append the element back to the parentElement again.

推荐答案

您只想保存原始的 parentNode 一次，并在需要时使用它.像这样的事情应该有效.根据您的设置，您可能需要将 insertBefore 与Daniel Beck 的隐藏标记点子.

You just want to save the original parentNode once and use it when you need it. Something like this ought to work. Depending on your setup, you might need to use insertBefore with Daniel Beck's hidden marker idea.

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);
}

这篇关于在 dom 内移动 Vue 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！