在vue中根据解析的html内容动态插入组件

Question

1. 使用了segmentfalut的hyperdown解析器解析markdown语法的博客.
2. 解析成html插入后<img>显示有新的需求,需要点击弹出模态框用源尺寸打开
3. element-ui 有相应的组件,但是不知道如何插入

原始html是不会解析组件的我知道行不通
以前没学用bootstrap + jquery 的方法 也不能插入vue组件

不知道如何对解析出来的html字符串里面的<img>元素,来动态绑定这个模态框
说白了我就是要实现这个动态的图片放大功能.

目前暂时自己用原生撸了个简陋的js...额 我自己不满意, 不符合vue设计理念感觉

Answer 1

既然用Vue，就不要用jQuery了，你这个需求需要使用动态模板（dynamic template），步骤这样：

1 需要用vue的full版本（包括compiler），而不仅是runtime版本，在webpack配置中需要增加一个alias，类似

vue: 'vue/dist/vue.js'

2.然后在模板文件中，使用下面的方式来嵌入动态模板

<component :is="dynamicTemplate()" />

dynamicTemplate函数需要返回处理好的模板内容，类似：

return Vue.compile('<div>' + dynamicContent +'</div>')

之所以再套一个div，是因为Vue的模块需要单根。如果在动态模板内容中依赖一些组件，这些组件需要提前注册好，可以使用vue的全局模块注册。