<view class="show-content previewImg" v-html="detail.content" @click.stop="previewImg($event,detail.content)">
</view>
注意要在第一次进入页面获取到数据后就执行一次previewImg,否则第一次点击是预览不了的
this.$nextTick(() => {
this.previewImg(null, this.detail.content)
})
previewImg函数:
// 获取富文本图片预览当前下标 item当前的富文本内容 indexs当前项的下标
previewImg(event, item) {
let imgs = item.match(/<img[^>]+>/g); //把img所有节点的图片选择出来
var imgArr = []; //保存图片路径
//对图片进行处理从而获取路径
for (var j = 0; j < imgs.length; j++) {
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
imgArr.push(capture)
})
}
// 获取要点击的富文本父盒子
var box = document.getElementsByClassName('previewImg')
//对获取的项进行循环
//当点击的项的下标和循环的当前项下标相等
// 通过父节点获取所有图片
var nodes = Array.from(box[0].querySelectorAll('img'));
// 然后通过点击的节点知道当前节点的位置了
let xx = function(event) {
event.stopPropagation()
var target = event.target;
console.log(target.nodeName);
// 判断点击的节点是否是图片
if (target.nodeName !== 'IMG') {
box[0].removeEventListener('click', xx, false);
}
if (target.nodeName === 'IMG') {
// console.log(nodes.indexOf(event.target));
// 获取点击图片的当前下标
let indez = nodes.indexOf(event.target)
//最后进行图片预览
uni.previewImage({
current: imgArr[indez],
urls: imgArr,
success: (res) => {
if (box[0]) {
box[0].removeEventListener('click', xx, false);
}
}
});
}
}
box[0].addEventListener("click", xx)
},