Ich arbeite an der Konvertierung von XML- in Vue.js-Vorlagen.
Als ich jedoch versuchte, die v-tooltip-Komponente von Vuetify zu erstellen, stieß ich auf Probleme.
Dieser XSLT-Code:
<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>
Geschätzte Generation:
<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>
aber es verursacht einen Fehler aufgrund des Doppelpunkts in <xsl:attribute name="v-slot:activator">
Wenn ich die Doppelpunkte wie <xsl:attribute name="v-slotactivator"> entferne, bestätige ich, dass die XSLT-Transformation stattfindet, sodass die einzige Fehlerursache definitiv der Doppelpunkt ist.
In mehreren anderen Artikeln wurde darauf hingewiesen, dass etwas wie <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')}" verwendet wurde, aber keiner davon funktionierte.
Gibt es eine Lösung für dieses Problem? Oder schaffst du es einfach nicht?
Danke,
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
实际上，我有点自行解决，尽管这更像是一种解决方法。
我在 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正在工作！