1

我正在使用 VuePress，它将 Markdown 生成为 HTML。每个 Markdown 元素都在<p>标签内呈现。但是，我想通过<p>在包含图像或视频时解开标签来修改生成的 HTML 文档。

我已将代码添加到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、视频）应该正好出现在父内容原来的位置，而不是在所有其他内容的下方。
  • 当直接访问组件并导航到时，这应该可以工作。
  • 不依赖 jQuery
4

0 回答 0