使用 XSLT 创建 Vue.js 组件时的冒号问题
P粉924915787
P粉924915787 2024-03-27 22:32:19
[Vue.js讨论组]

我正在致力于从 XML 转换为 Vue.js 模板。 但是,当我尝试创建 Vuetify 的 v-tooltip 组件时,遇到了麻烦。

此 XSLT 代码:


    
    
        { on , attrs}
        
            attrs
            on
            mdi-home
        
    
    ToolTip


预计生成:


  
  Tooltip

但由于 中的冒号而导致错误 当我删除像 这样的冒号时,我确认发生了 XSLT 转换,因此错误的唯一原因肯定是冒号。

其他几篇文章指出使用像 一样,使用变体插入 v-slot:activatorv-slot:activator,或 name="{concat('v-slot',':','activator')}",都不起作用。

有没有解决此问题的方法?还是根本做不到?

谢谢,

P粉924915787
P粉924915787

全部回复(1)
P粉030479054

实际上,我有点自行解决,尽管这更像是一种解决方法。

我在 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 正在工作!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号