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

Question

这是关于带有 Vite 的 Vue 3 应用程序，而不是 webpack。

目前，正如您在vite 的问题页面上看到的，vite 没有一种在不使用外部插件的情况下内联 SVG 的便捷方法。但是，Vite支持将文件作为原始文本字符串导入。因此，我想到了使用此功能并通过将原始 SVG 字符串传递到元素的v-html.

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

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

有没有什么方法可以让我基本上用v-html传递给它的顶级元素替换声明的父元素？在上面的例子中，这意味着<span>just 变成了<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

您可以创建一个自定义指令，用其内容替换包装元素：

1. 用于app.directive()创建一个全局指令，名为v-inline-svg：

   // main.js
   import { createApp } from 'vue'
   import App from './App.vue'
   
   createApp(App)
     .directive('inline-svg', el => {
       if (!el) {
         return
       }
   
       // copy attributes to first child
       const content = el.tagName === 'TEMPLATE' ? el.content : el
       if (content.children.length === 1) {
         ;[...el.attributes].forEach((attr) => content.firstChild.setAttribute(attr.name, attr.value))
       }
   
       // replace element with content
       if (el.tagName === 'TEMPLATE') {
         el.replaceWith(el.content)
       } else {
         el.replaceWith(...el.children)
       }
     })
     .mount('#app')
   

2. 在您的组件中，包含v-inline-svg包装v-html元素（也适用<template>于 Vue 3）：

   <svg v-html="svgRaw" v-inline-svg />
   <!-- OR -->
   <template v-html="svgRaw" v-inline-svg />
   

演示