Problème de côlon lors de l'utilisation de XSLT pour créer des composants Vue.js

Question

Je travaille sur la conversion des modèles XML vers Vue.js. Cependant, j'ai rencontré des problèmes lorsque j'ai essayé de créer le composant v-tooltip de Vuetify.

Ce code 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>

Génération estimée :

<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>

mais cela provoque une erreur due aux deux points dans <xsl:attribute name="v-slot:activator"> Lorsque je supprime les deux points comme <xsl:attribute name="v-slotactivator">, je confirme que la transformation XSLT se produit, donc la seule cause de l'erreur est définitivement les deux points.

Plusieurs autres articles ont souligné l'utilisation de quelque chose comme <xsl:attribute name="v-slot&colon;activator"> 一样，使用变体插入 <xsl:text>v-slot:activator<xsl:text> 或 <xs l：文本禁用输出转义=“是” “>v-slot:activator<xsl:text>，或 name="{concat('v-slot',':','activator')}", dont aucun ne fonctionne.

Existe-t-il une solution à ce problème ? Ou tout simplement vous ne pouvez pas le faire ?

Merci,

Answer 1

En fait, je l'ai en quelque sorte compris par moi-même, bien qu'il s'agisse plutôt d'une solution de contournement.

J'utilise XSLTProcessor en JS pour générer du code Vue.js. En utilisant cette classe, je peux obtenir le DOM comme résultat de la transformation. J'ai réussi à manipuler le DOM après la transformation XSLT.

Voici ce que j'ai fait :

Tout d'abord, dans le code XSLT, j'ajoute template 元素添加了一个值为 vslot（例如）的 id 属性。简而言之，我将 <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute> 替换为 <xsl:attribute name="id">vslot</xsl:attribute >.

Deuxièmement, dans le code JS, j'utilise l'attribut setAttribute() 方法和 XSLT 中设置的 id 值更改了属性和值（以及 removeAttribute() 方法以及删除 id) comme ceci :

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

Et voilà ! v-icon 出现在浏览器上，并且 v-tooltip Je travaille maintenant !