移動dom內部的Vue組件？

如果我在手機上，我正在將Vue組件向上移動，因爲我想使用絕對定位，並且要確保我不在relative容器內。移動dom內部的Vue組件？

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。

來源

2017-07-18 Stephan-v

我把一個隱藏的標記元素放在原始位置，當你移動元素時可以被替換。（但在此之前，我會看到是否可以重構設計，不需要重新排列DOM ......） –

@DanielBeck聽起來像個好主意。設計無法改變我需要一個全屏覆蓋，固定位置對於這個太多了。因此，我需要使用絕對位置，但我也需要確保它不在相對容器內。恐怕沒有別的選擇。 –

夠公平的！另一種方法是根據窗口大小重複每個具有「v-if」的組件;這可能比手動重新排列DOM更好 –

您只想保存原始的parentNode一次，並在需要時使用它。像這樣的東西應該工作。根據您的設置，您可能需要使用Daniel Beck的隱藏標記想法來使用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); 
}

來源

2017-07-18 14:43:32

移動dom內部的Vue組件？

回答

相關問題