uni-app v-html图片点击预览



注意要在第一次进入页面获取到数据后就执行一次previewImg,否则第一次点击是预览不了的

this.$nextTick(() => {
                        this.previewImg(null, this.detail.content)
                    })

previewImg函数:

// 获取富文本图片预览当前下标 item当前的富文本内容 indexs当前项的下标
            previewImg(event, item) {
                let imgs = item.match(/]+>/g); //把img所有节点的图片选择出来
                var imgArr = []; //保存图片路径
                //对图片进行处理从而获取路径
                for (var j = 0; j < imgs.length; j++) {
                    imgs[j].replace(/]*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)
            },

你可能感兴趣的:(uni-app v-html图片点击预览)