Как развернуть элемент Vue DOM и сохранить его положение - PullRequest
Новая
       24

Как развернуть элемент Vue DOM и сохранить его положение

1 голос
/ 09 июня 2019

Я использую VuePress, который генерирует Markdown to HTML.Каждый элемент Markdown отображается внутри тега <p>.Однако я хотел бы изменить сгенерированный HTML-документ, развернув тег <p>, если он содержит изображение или видео.

Я добавил свой код в хук жизненного цикла mounted() Vue страницы (компонента).

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

Это не работает: при прямом доступе к странице содержимое отображается ниже остальной части содержимого Markdown на странице.Не в исходном положении. 

const elements = this.$refs.content.$el.querySelectorAll("p img, p video"); // Note: Using document.querySelectorAll yields the same results
Array.from(elements).forEach(el => {
  let elParentNode = el.parentNode;
  if (elParentNode !== document.body) {
    elParentNode.parentNode.insertBefore(el, elParentNode);
    elParentNode.parentNode.removeChild(elParentNode);
  }
});

Требования:

  • Развернутый контент (img, video) должен отображаться точно в том месте, где изначально был родительский контент, а не под всем остальным контентом.,
  • Это должно работать, когда к компоненту обращаются напрямую и при переходе к.
  • Нет зависимости от jQuery
...