Masalah kolon apabila menggunakan XSLT untuk mencipta komponen Vue.js

Question

Saya sedang berusaha untuk menukar daripada templat XML kepada Vue.js. Walau bagaimanapun, saya menghadapi masalah apabila saya cuba mencipta komponen v-tooltip Vuetify.

Kod XSLT ini:

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

Anggaran penjanaan:

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

tetapi ia menyebabkan ralat kerana kolon dalam <xsl:attribute name="v-slot:activator"> Apabila saya mengeluarkan titik bertindih seperti <xsl:attribute name="v-slotactivator"> Saya mengesahkan bahawa transformasi XSLT berlaku, jadi satu-satunya punca ralat adalah pasti kolon.

Beberapa artikel lain menunjukkan menggunakan sesuatu seperti <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')}", tiada satu pun yang berkesan.

Adakah penyelesaian untuk masalah ini? Atau hanya tidak boleh melakukannya?

Terima kasih,

Answer 1

Saya sebenarnya agak memikirkannya sendiri, walaupun ini lebih kepada penyelesaian.

Saya menggunakan XSLTProcessor dalam JS untuk menjana kod Vue.js. Dengan menggunakan kelas ini saya boleh mendapatkan DOM sebagai hasil penukaran. Saya berjaya memanipulasi DOM selepas transformasi XSLT.

Ini yang saya lakukan:

Pertama, dalam kod XSLT, saya tambahkan template 元素添加了一个值为 vslot（例如）的 id 属性。简而言之，我将 <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute> 替换为 <xsl:attribute name="id">vslot</xsl:attribute >.

Kedua, dalam kod JS, saya menggunakan atribut setAttribute() 方法和 XSLT 中设置的 id 值更改了属性和值（以及 removeAttribute() 方法以及删除 id) seperti ini:

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

Dan, voila! v-icon 出现在浏览器上，并且 v-tooltip Bekerja sekarang!