Vue 3 替换了 HTML 标签，其中使用提供的 HTML 调用了 v-html

Question

这是关于使用 Vite 而非 webpack 的 Vue 3 应用程序。

现在，正如您从 this issue on vite's issue page, vite doesn't have a convenient way of inlining SVGs without using external plugins. Vite does however, support importing files as raw text strings 中看到的那样。因此，我想到了使用此功能并通过将原始 SVG 字符串传递到元素的 v-html.

来内联 SVG

它实际上工作得很好，SVG 按预期显示在页面上，我可以进行通常的 CSS 转换（像这样内联它们的全部目的），但它并不完美。按照目前的情况，接收 v-html 指令的元素只是将提供的 HTML 作为子元素嵌套。例如，如果我做 <span v-html="svgRaw" />，最后的 HTML 会像这样

<span>
  <svg>
    <!-- SVG attributes go here -->
  </svg>
</span>

有没有什么方法可以将声明 v-html 的父元素替换为传递给它的顶级元素？在上面的例子中，这意味着 <span> 变成了 <svg>

编辑：

感谢 tony19 提到自定义指令。

我的最终结果是这样的：

// main.ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.directive("inline", (element) => {
  element.replaceWith(...element.children);
});

app.mount("#app");

然后，在组件中我简单地使用了指令，<svg v-html="svgRaw" v-inline />，效果很好！

Answer 1

来自 Vue2。我认为这仍然有效：
你可以使用特殊的 Vue 标签 template:

而不是 span

<template v-html="svgRaw" />

这不会将 <template /> 呈现为标签本身，而是呈现 v-html 中给出的没有父元素的元素。

Answer 2

您可以创建一个 custom directive 用其内容替换包装元素：

使用app.directive()创建一个全局指令，命名为v-hoist:

// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App)
  .directive('hoist', el => {
    if (el.tagName === 'TEMPLATE') {
      el.replaceWith(el.content)
    } else {
      el.replaceWith(...el.children)
    }
  })
  .mount('#app')

在您的组件中，在 v-html 包装器元素上包含 v-hoist（也适用于 Vue 3 中的 <template>）：
```
<svg v-html="svgRaw" v-hoist />

<template v-html="svgRaw" v-hoist />
```

demo

Vue 3 替换了 HTML 标签，其中使用提供的 HTML 调用了 v-html

Vue 3 replacing the HTML tags where v-html is called with the provided HTML

vue.js

vuejs3

vite