使用 XSLT 创建 Vue.js 组件时的冒号问题

Question

我正在致力于从 XML 转换为 Vue.js 模板。 但是，当我尝试创建 Vuetify 的 v-tooltip 组件时，遇到了麻烦。

此 XSLT 代码：

<xsl:element name="v-tooltip">
    <xsl:attribute name="bottom"/>
    <xsl:element name="template">
        <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute>
        <xsl:element name="v-icon">
            <xsl:attribute name="v-bind">attrs</xsl:attribute>
            <xsl:attribute name="v-on">on</xsl:attribute>
            mdi-home
        </xsl:element>
    </xsl:element>
    <xsl:element name="span">ToolTip</xsl:element>
</xsl:element>

预计生成：

<v-tooltip bottom>
  <template v-slot:activator="{ on, attrs }">
    <v-icon
      v-bind="attrs"
      v-on="on"
    >
      mdi-home
    </v-icon>
  </template>
  <span>Tooltip</span>
</v-tooltip>

但由于 <xsl:attribute name="v-slot:activator"> 中的冒号而导致错误 当我删除像 <xsl:attribute name="v-slotactivator"> 这样的冒号时，我确认发生了 XSLT 转换，因此错误的唯一原因肯定是冒号。

其他几篇文章指出使用像 <xsl:attribute name="v-slot:activator"> 一样，使用变体插入 <xsl:text>v-slot:activator<xsl:text> 或 <xs l：文本禁用输出转义=“是” “>v-slot:activator<xsl:text>，或 name="{concat('v-slot',':','activator')}"，都不起作用。

有没有解决此问题的方法？还是根本做不到？

谢谢，

Answer 1

实际上，我有点自行解决，尽管这更像是一种解决方法。

我在 JS 中使用 XSLTProcessor 生成 Vue.js 代码。通过使用这个类，我可以获得 DOM 作为转换结果。我设法在 XSLT 转换后操作 DOM。

这是我所做的：

首先，在 XSLT 代码中，我向 template 元素添加了一个值为 vslot（例如）的 id 属性。简而言之，我将 <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute> 替换为 <xsl:attribute name="id">vslot</xsl:attribute >。

其次，在JS代码中，我使用 setAttribute() 方法和 XSLT 中设置的 id 值更改了属性和值（以及 removeAttribute() 方法以及删除 id 属性），如下所示：

var xsltProcessor = new XSLTProcessor()
xsltProcessor.importStylesheet(xsl)
var doc = xsltProcessor.transformToDocument(xml)
doc.getElementById('vslot').setAttribute('v-slot:activator','{ on, attrs }')
doc.getElementById('vslot').removeAttribute('id')
var result = doc.documentElement.outerHTML

而且，瞧！ v-icon 出现在浏览器上，并且 v-tooltip 正在工作！