uni-app富文本解析出来的图文，图片需要做点击缩放功能，应该如何写？

Question

这是富文本赋值解析地方

this.brief = graceRichText.format(res.data.list[this.now].brief)

这是页面

<rich-text :nodes="brief" class="vioce-brief"></rich-text>

我应该这么做处理呢？

Answer 1

正则匹配img标签将所有img的src放入装入一个数组

let imgs =[];
nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {

imgs.push(capture);

return '';

});

this.imgs = imgs;

思路是在文本渲染出来以后在给img添加click事件具体如下

onLoa(){

    let arr =document.getElementsByTagName("img");//逼不得已操作dom元素

    console.log(arr);

          if(arr){

                for (let i = 0; i < arr.length; i++) {

                    this.$nextTick(()=>{

                      arr[i].addEventListener("click", function(){

                        console.log(arr[i])

                        })

                        });
                 }
            }

}

图片预览操作

 chooseImg(e) {   //预览事件
        let src = e.currentTarget.dataset.src;
        console.log(src)
        let urls = [];
        urls = this.imgs;
        uni.previewImage({
            current: src, // 当前显示图片的http链接  
            urls: urls,
        })
        },

就ok啦，最近有小伙伴私信我解决了没有，那我就发出来分享一哈，如果对你有帮助记得关注小心心点一点，谢谢啦~~