具體情況就是從后臺(tái)獲取文章詳情渴析，用v-html的方法輸出啄寡，怎么才可以實(shí)現(xiàn)點(diǎn)擊圖片令圖片放大的效果拾弃。
關(guān)于圖片放大的效果惨寿，可以調(diào)用vux的組件Previewer邦泄。
https://doc.vux.li/zh-CN/components/previewer.html
問(wèn)題的難度是怎么給每個(gè)圖片加上click事件呢？并且給每個(gè)事件附上index呢裂垦？
如果你用 Previewer 綁定了一個(gè)所有圖片的鏈接的數(shù)組的話顺囊。
當(dāng)初第一想法是利用正則表達(dá)式找出所有圖片鏈接，這方面還是很容易的蕉拢，但是繼續(xù)下去呢特碳，把所有圖片鏈接存放進(jìn)previewer的綁定數(shù)組诚亚，然后點(diǎn)擊圖片時(shí)還需要找到對(duì)應(yīng)的數(shù)組中的index，嗯午乓，還有給每張圖片綁定點(diǎn)擊事件站宗。
太麻煩，太繞了益愈。
沒(méi)有方便一點(diǎn)的方法嗎梢灭？
后來(lái)利用事件冒泡順利解決了這個(gè)問(wèn)題，既不用正則表達(dá)式費(fèi)心思找出圖片鏈接蒸其，也不用要給每張圖片標(biāo)序敏释。
在輸出v-html的父元素（包裹輸出內(nèi)容的元素）綁定click事件。
利用e.target.nodeName == 'IMG'判斷是否點(diǎn)擊了圖片摸袁，然后可以利用 e.target.currentSrc 獲取當(dāng)前圖片的鏈接钥顽，存放進(jìn)previewer的綁定數(shù)組，讓這個(gè)數(shù)組每次點(diǎn)擊時(shí)都只存放當(dāng)前圖片的鏈接靠汁，所以觸發(fā)previewer所需要的index自然而然就解決了蜂大，每次都是0。
下面就是用到的代碼蝶怔。
<div class="content">
<div v-html="detail.data.content" @click="previewImage"></div>
</div>
<div v-transfer-dom>
<previewer :list="list" ref="previewer"></previewer>
</div>
import { Previewer, TransferDom } from 'vux';
directives: {
TransferDom
},
components: {
Previewer
},
methods: {
previewImage (e) {
if (e.target.nodeName == 'IMG') {
let url = e.target.currentSrc;
let item = {
src: url
};
this.list.length = 0;
this.list.push(item);
this.$refs.previewer.show(0);
} else {
return;
}
}
},
