图片点击预览 - ImagePreview

1. 导入

import { ImagePreview } from 'vant';

2. 使用

ImagePreview({
  images: [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg'
  ],
  // 预览图片的起始位置
  startPosition: 1,
  // 点击关闭
  onClose () {
    // do something
    console.log('关闭')
  }
})

3. 在获取文章数据后，调用previewImg函数获取所有的图片DOM节点

3.1在内容根标签上使用ref指令来标记要获取的DOM,通过$refs来获取整个标记的DOM元素

4. 在methods中执行previewImg函数遍历所有 img 节点，给每个节点注册点击事件

    // 初始化数据
    previewImage () {
      // 得到ref标记的DOM
      const articleContent = this.$refs['article-content']
      // 获取所有的img元素
      const imgs = articleContent.querySelectorAll('img')
      // 由于获取到的img数组为伪数组，需要先转换为真数组，然后遍历获取所有 img 地址
       imgs = [...imgs]
      const imgsList = imgs.map(img => img.src)
      imgs.forEach((img, index) => {
         // 给每个 img 注册点击事件，在处理函数中调用预览
        img.onclick = () => {
           // 组件库中的核心代码 
          ImagePreview({
            // 预览的图片地址数组
            images: imgsList,
            // 起始位置，从 0 开始
            startPosition: index
          })
        }
      })
    }

5.最终实现效果，组件库中还有其他功能

vue中如何利用组件库实现图片点击预览

图片点击预览 - ImagePreview