找回密码
 立即注册
搜索

开发问题 H5点击组件无法解析Vue模板中的标签

0
回复
450
查看
[复制链接]

1

主题

1

帖子

10

积分

 楼主| 2022-7-14 15:23:56 显示全部楼层 |阅读模式

问题描述:

  1. 引入//statres.quickapp.cn/quickapp/js/qa_router.min.js

  2. 在Vue页面的模板中使用H5点击组件

image.png

3. 查看页面元素,标签没有被解析为iframe

image.png

4. 使用动态插入的方式

document.querySelector('#quickappButtonWrap').innerHTML = `       <qa-router-button         data-package-name=""         data-page="/"         id="clickComponent"       >         <templates>           <img src="icon.png"></img>           <button style="width: 100px; height: 50px;">秒开</button>         </templates>         <styles>         <!-- <styles> 中插入样式 -->           #container { }           img { }           button { width: '100px'; height: '50px'; }        </styles>       </qa-router-button> `

5. 标签被成功解析出iframe

image.png

观察qa_router.min.js中的逻辑,写在Vue模板文件中的元素在渲染的时候没有触发MutationObserver;而动态插入的元素触发了MutationObserver完成标签解析。

猜测是不是MutationObserver的触发机制导致标签解析失败?

可以在qa_router中开放方法给开发者手动触发标签解析吗?

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册