ImagePreview 图片预览 的使用

一、ImagePreview 图片预览 的使用

ImagePreview 是一个函数（必须使用按需到处），调用函数后会直接在页面中展示图片预览界面。

// 实现图片预览

import { ImagePreview } from 'vant'

二、处理图片点击预览

思路：

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

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

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

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

//在methods节点下：
previewImage () {
      // 得到所有的img节点
      const articleContent = this.$refs['article-content']
      const imgs = articleContent.querySelectorAll('img')
      const images = []
      imgs.forEach((img, index) => {
        images.push(img.src)
        // 给每个img节点绑定点击事件,
        img.onclick = function () {
          ImagePreview({
            // 预览的图片地址数组
            images,
            // 起始位置
            startPosition: index
          })
        }
      })
    },