在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 在vue中根據(jù)解析的html內(nèi)容動(dòng)態(tài)插入組件

在vue中根據(jù)解析的html內(nèi)容動(dòng)態(tài)插入組件

  1. 使用了segmentfalut的hyperdown解析器解析markdown語(yǔ)法的博客.
  2. 解析成html插入后<img>顯示有新的需求,需要點(diǎn)擊彈出模態(tài)框用源尺寸打開(kāi)
  3. element-ui 有相應(yīng)的組件,但是不知道如何插入

原始html是不會(huì)解析組件的我知道行不通
以前沒(méi)學(xué)用bootstrap + jquery 的方法 也不能插入vue組件

不知道如何對(duì)解析出來(lái)的html字符串里面的<img>元素,來(lái)動(dòng)態(tài)綁定這個(gè)模態(tài)框
說(shuō)白了我就是要實(shí)現(xiàn)這個(gè)動(dòng)態(tài)的圖片放大功能.

目前暫時(shí)自己用原生擼了個(gè)簡(jiǎn)陋的js...額 我自己不滿意, 不符合vue設(shè)計(jì)理念感覺(jué)

回答
編輯回答
醉淸風(fēng)

既然用Vue，就不要用jQuery了，你這個(gè)需求需要使用動(dòng)態(tài)模板（dynamic template），步驟這樣：

1 需要用vue的full版本（包括compiler），而不僅是runtime版本，在webpack配置中需要增加一個(gè)alias，類似

vue: 'vue/dist/vue.js'

2.然后在模板文件中，使用下面的方式來(lái)嵌入動(dòng)態(tài)模板

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

dynamicTemplate函數(shù)需要返回處理好的模板內(nèi)容，類似：

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

之所以再套一個(gè)div，是因?yàn)閂ue的模塊需要單根。如果在動(dòng)態(tài)模板內(nèi)容中依賴一些組件，這些組件需要提前注冊(cè)好，可以使用vue的全局模塊注冊(cè)。

2018年1月20日 23:23