移动端图片预览实现

思路：

1、从文章内容中获取到所有的 img DOM 节点

2、获取文章内容中所有的图片地址

3、遍历所有 img 节点，给每个节点注册点击事件

4、在 img 点击事件处理函数中，调用 vant 提供的 ImagePreview 预览

实现代码

<template>
  <div
    class="article-content markdown-body"
    v-html="article.content"
    ref="article-content"
  ></div>
</template>
<script>
export default {
    data () {
      return {
        article: {}
      }
    }
    methods: {
      async loadArticle () {
        try {
          const { data } = await getArticleById(this.articleId)
          // 数据驱动视图这件事儿不是立即的
          this.article = data.data
          // 初始化图片点击预览。因为vue更新dom是异步的，所以这里获取文章数据后，马上通过ref这种方式               // 是获取不到最新的dom的，除了下面这种方式，也可以通过$nextTick
          setTimeout(() => {
            this.previewImage()
          }, 0)
        } catch (err) {
          if (err.response && err.response.status === 404) {
          this.errStatus = 404
          }
        }
      },
      previewImage () {
       // 得到所有的 img 节点
       const articleContent = this.$refs['article-content']
       const imgs = articleContent.querySelectorAll('img')
       // 获取所有 img 地址
       const images = []
       imgs.forEach((img, index) => {
         images.push(img.src)
          // 给每个 img 注册点击事件，在处理函数中调用预览
         img.onclick = () => {
           ImagePreview({
           // 预览的图片地址数组
           images,
           // 起始位置，从 0 开始
           startPosition: index
           })
         }
      })
     }
    }
}
</script>