笔记：图片预览处理方法

在vue中的图片预览处理

1.首先利用ref获取文章Dom容器

示例：

添加ref

     <div
      class="content markdown-body"
      v-html="article.content"
      ref="article-content"
    ></div>

获取：

const articleContent = this.$refs["article-content"];

2.因为数据改变影响视图更新（Dom数据）不是立即更新的，在修改数据后马上操作被该数据影响的视图Dom，需要把这个代码放在$nextTick中

3.获取所有img标签，循环img标签并注册点击事件

    this.$nextTick(() => {
            const imgs = articleContent.querySelectorAll("img");
            const imgPaths = []  //搜集所有的图片路径
              imgs.forEach((img,index) => { //循环img列表，                                                                                                   
                    mgPaths.push(img.src)
                   //给img注册点击事件
                img.onclick = function(){
                ImagePreview({  //利用vant ImagePreview函数方法展示图片预览
                images: imgPaths,//预览图片路径列表
                startPosition: index, //起始位置
              });

            }
          })
         });

 $nextTick()方法对比

没有使用获取的

使用后获取的