文章详情：图片预览功能，重点：数据驱动视图 这件事不是立即的， 用setTimeout解决

完整代码在这：juejin.cn/post/699957…

图片预览功能vant组件 youzan.github.io/vant/#/zh-C…

重点：数据驱动视图 这件事不是立即的

处理图片点击预览： 思路：

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

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

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

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

以下是图片预览功能涉及到的代码：

<script>
export default {
  name: 'ArticleIndex',
  methods: {
    async loadArticlesByid() {
     ...
     // 重点：数据驱动视图 这件事不是立即的，
      this.article = data.data
      // 预览图片初始化
        setTimeout(() => {
          this.previewImage()
          // console.log(this.$refs['article-content']);
        }, 0);
      }
    },
    
    // 图片预览功能 ：https://youzan.github.io/vant/#/zh-CN/image-preview
    previewImage() {
      // 获取dom容器
      const container = this.$refs['article-content']
      // 获取dom容器中的所有img节点
      const imgs = container.querySelectorAll('img')
      const images = []
      // 遍历所有 img 节点，给每个节点注册点击事件
      imgs.forEach((img, index) => {
        images.push(img.src)
        img.onclick = () => {
          // 调用vant的图片预览组件
          ImagePreview({
            images,
            startPosition: index,
          })
        }
      });
    },
    // 发布评论成功
    onPostSuccess(data) {
      // 关闭发布弹层
      this.isPropShow = false
      this.CommentLists.unshift(data.new_obj)
    },

    // 评论回复
    onReplay(comment) {
      this.commentReplays = comment
      this.isReplayShow = true
    }
  }
}
</script>