使用v-viewer优化ant design vue的图片预览

因为 ant design vue 没有 ant design 的 <image> 标签，所以图片没办法预览，对上上传的图片预览也是简单粗暴的地使用一个model完事，所以必须自己写图片预览，或者找个图片预览的插件，通过对比，发现 v-viewer 挺好的（ 插件效果 和 github地址 ）挺好用的，所以就将两者组合了。以下是核心代码，至于 v-viewer 和 ant design vue的引入，看官网吧，这里就不赘述了

// template

      <a-upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        class="step_upload"
        list-type="picture-card"
        :file-list="fileList"
        @preview="handlePreview"
        @change="handleChange"
      >
        <div v-if="fileList.length < 1">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            步骤图
          </div>
        </div>
      </a-upload>
      <!-- 图片预览 -->
      <viewer :images="previewImage" @inited="inited" ref="viewer">
        <template scope="scope">
          <img style="display: none;" v-for="(src, index) in previewImage" :src="src" :key="index" />
          {{ scope.options }}
        </template>
      </viewer>

import { videoPlayer } from 'vue-video-player'

// data()
previewImage: [],

//methods

  methods: {
    inited (viewer) {
      this.$viewer = viewer
    },
    getBase64 (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
      })
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj)
      }
      const temp = file.url || file.preview
      this.previewImage.push(temp)
      this.$viewer.show()
    },
    handleChange ({ fileList }) {
      // this.fileList = fileList
      console.log('fileList', fileList)
    },
  }