vue实现通过点击按钮来触发图片预览功能

element-ui自身可以通过el-image来实现大图预览的功能，但如果想实现点击按钮来预览图片需要手动封装组件来完成。

第一步，components文件夹下新建imageView文件夹，来存放封装的预览图片组件

//在imageView文件夹下新建imageView.vue文件

<template>
  <div>
    <el-image-viewer ref="imageViewer" style="z-index:3000" :on-close="closeViewer" :url-list="urlList" />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: "imageView",
  components: { ElImageViewer },
  methods: {
    closeViewer() {
      // 右上方关闭按钮销毁该组件
      document.body.removeChild( document.getElementsByClassName('el-image-viewer__wrapper')[0])
    },
  }
}
</script>
<style scoped lang="less">
::v-deep .el-image-viewer__close {
  color: white;
}
</style>
  

//在imageView文件夹下新建imageView.js文件

import ImgView from './imgView.vue'
export default {
  install(vue) {
    const Constructor = vue.extend(ImgView)
    // 将 $imgView 方法挂载到vue原型上用于全局调用，传入urlList预览图片地址数组
    vue.prototype.$imgView = urlList => {
      const instance = new Constructor({
        data() {
          return {
            urlList: urlList
          }
        }
      })
      const instanceDom = instance.$mount()
      // 将预览图片组件注入到body的子节点
      document.body.appendChild(instanceDom .$el)
    }
  }
}

第二步，在main.js文件中注入

import ImgView from '@/components/imgView/imgView.js' ；

Vue.use(ImgView)；

第三步，组件按钮上调用

// 标签上通过调用$imgView实现预览，并传入预览图片数组
<span style="color:#409EFF;cursor: pointer;" @click="$imgView(['url1','url2'])">查看</span>