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

<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)
            },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容