使用 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 正在運作！