Перемещение компонентов Vue внутри dom?

я перемещаю компоненты Vue в dom, если я нахожусь на мобильном телефоне, так как я хочу использовать абсолютное позиционирование и хочу убедиться, что я не в 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.
}

этот код помещается с debounced resize метод, поэтому он также работает при изменении размера окна.

он работает нормально, но когда я начинаю на мобильном телефоне и изменяю размер обратно на рабочий стол, мне нужно получить исходное местоположение dom, где компонент был впервые инициализирован.

это может быть Javascript только вопрос, но как я могу получить исходное местоположение точного положения dom этого компонента, чтобы я мог поместить его обратно?

редактировать

Я сохраняю исходный родительский элемент с помощью:

this.parent = this.$el.parentElement;

это не гарантирует правильный порядок в родительском элементе, хотя, когда я добавляю элемент обратно в parentElement снова.

6
javascript vue-component vue.js vuejs2

1 ответов

вы просто хотите сохранить оригинал parentNode один раз и использовать его, когда вам это нужно. Что-то вроде этого должно работать. В зависимости от настройки может потребоваться использовать insertBefore С идеей скрытого маркера Дэниела Бека.

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