我正在致力于从 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')}"
,都不起作用。
有没有解决此问题的方法?还是根本做不到?
谢谢,
实际上,我有点自行解决,尽管这更像是一种解决方法。
我在 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
属性),如下所示:而且,瞧!
v-icon
出现在浏览器上,并且v-tooltip
正在工作!