el-image-viewer实现点击按钮预览图片

Element el-image 组件可以通过传入属性 previewSrcList 实现大图预览功能，但是现在的需求是点击按钮预览图片， el-image预览大图是通过组件el-image-viewer 实现的，对他进行简单的二次封装成全局组件，实现点击按钮编程式调用组件实现预览效果。

imgView.vue

创建一个普通组件,引入 el-image-viewer 进行业务处理。

<template>
  <div>
    <el-image-viewer
      :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() {
      // 关闭组件后从父级dom销毁这个挂载
      this.$el.parentNode.removeChild(this.$el)
    },
  }
}
</script>
<style scoped lang="less">
::v-deep .el-image-viewer__close{
  color:white;
}
</style>

imgView.js

同文件夹下创建js文件，进行全局化组件的配置。

Vue.use ( plugin )

安装 Vue.js 插件，如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

Vue.extend ( options )

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象

vm.$mount( [elementOrSelector] )

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法。

import ImgView from './imgView.vue'
export default {
  // 给对象提供 install 方法，vue作为参数传入
  install(vue) {
    // 使用基础 Vue 构造器，创建一个Constructor “子类”。
    // 参数是一个包含ImgView组件选项的对象
    const Constructor = vue.extend(ImgView)
    // 将 $imgView 方法挂载到vue原型上用于全局调用
    vue.prototype.$imgView = urlList => {
      // 实例化“子类构造器”
      const instance = new Constructor({
        data() {
          return {
            urlList: urlList
          }
        }
      })
      // 使用 vm.$mount() 手动地挂载一个未挂载的实例。
      // 没有提供参数，模板将被渲染为文档之外的的元素
      const instanceDom = instance.$mount()
      // 使用原生DOM API把instance实例插入body中。 
      document.body.appendChild(instanceDom .$el)
    }
  }
}

main.js

import ImgView from '@/components/imgView/imgView.js'
Vue.use(ImgView)

使用

<el-table-column fixed label="照片" align="center">
  <template v-slot='{row}'>
    <el-button type="text" @click="$imgView([row.photo])">查看 </el-button>
  </template>
</el-table-column>