<view class="show-content previewImg" v-html="detail.content" @click.stop="previewImg($event,detail.content)">
</view>
注意要在第一次進(jìn)入頁面獲取到數(shù)據(jù)后就執(zhí)行一次previewImg,否則第一次點(diǎn)擊是預(yù)覽不了的
this.$nextTick(() => {
this.previewImg(null, this.detail.content)
})
previewImg函數(shù)：
// 獲取富文本圖片預(yù)覽當(dāng)前下標(biāo) item當(dāng)前的富文本內(nèi)容 indexs當(dāng)前項(xiàng)的下標(biāo)
previewImg(event, item) {
let imgs = item.match(/<img[^>]+>/g); //把img所有節(jié)點(diǎn)的圖片選擇出來
var imgArr = []; //保存圖片路徑
//對(duì)圖片進(jìn)行處理從而獲取路徑
for (var j = 0; j < imgs.length; j++) {
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
imgArr.push(capture)
})
}
// 獲取要點(diǎn)擊的富文本父盒子
var box = document.getElementsByClassName('previewImg')
//對(duì)獲取的項(xiàng)進(jìn)行循環(huán)
//當(dāng)點(diǎn)擊的項(xiàng)的下標(biāo)和循環(huán)的當(dāng)前項(xiàng)下標(biāo)相等
// 通過父節(jié)點(diǎn)獲取所有圖片
var nodes = Array.from(box[0].querySelectorAll('img'));
// 然后通過點(diǎn)擊的節(jié)點(diǎn)知道當(dāng)前節(jié)點(diǎn)的位置了
let xx = function(event) {
event.stopPropagation()
var target = event.target;
console.log(target.nodeName);
// 判斷點(diǎn)擊的節(jié)點(diǎn)是否是圖片
if (target.nodeName !== 'IMG') {
box[0].removeEventListener('click', xx, false);
}
if (target.nodeName === 'IMG') {
// console.log(nodes.indexOf(event.target));
// 獲取點(diǎn)擊圖片的當(dāng)前下標(biāo)
let indez = nodes.indexOf(event.target)
//最后進(jìn)行圖片預(yù)覽
uni.previewImage({
current: imgArr[indez],
urls: imgArr,
success: (res) => {
if (box[0]) {
box[0].removeEventListener('click', xx, false);
}
}
});
}
}
box[0].addEventListener("click", xx)
},
