vant组件库中ImagePreview实现点击预览图片功能

假设页面中有3张图片,在我点击时可以预览图片,并且以轮播图的形式展示出来:

  <div ref="art">
      <img src="./img/1.png" alt="" />
      <img src="./img/2.png" alt="" />
      <img src="./img/3.png" alt="" />
    </div>

1.按需导入ImagePreview

import { ImagePreview } from 'vant'

核心代码:

       // 预览图片的方法
        this.$nextTick(function () {
          // 1.获取所有图片
          const imgs = this.$refs.art.querySelectorAll('img')
          // 2.遍历图片  保存路径 ，添加事件
          const srcArr = []
          imgs.forEach((e, i) => {
            srcArr.push(e.src)
            e.addEventListener('click', function () {
              // 调用图片预览组件
              ImagePreview({
                images: srcArr, // 传入图片路径数量
                startPosition: 0, // 从第0张开始预览
                showIndicators: true
              })
            })
          })
          console.log(imgs)
        })