饿了么的图片预览插件直接使用指令方式调用

首先新建一个Preview的组件

<template>
  <el-image-viewer
    class="preview-img-component"
    v-if="showPreview"
    :urlList="previewImages"
    :on-close="closeViewer"
  ></el-image-viewer>
</template>

<script>
// 可自行去对应目录查看该组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  data() {
    return {
      showPreview: false,
      previewImages: [],
    }
  },
  components: {
    ElImageViewer,
  },
  methods: {
    closeViewer() {
      this.showPreview = false
    },
  },
}
</script>

<style lang="scss" scoped>
.preview-img-component {
  z-index: 10000 !important;
  ::v-deep .el-icon-circle-close {
    color: #ffffff;
  }
}
</style>

然后在utils下新建preview.js

import PreviewItem from '../components/Preview.vue'

const Preview = {}

// 注册
Preview.install = function (Vue) {
  const PreviewConstructor = Vue.extend(PreviewItem)
  const instance = new PreviewConstructor()
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)

  /**
   * 挂载在vue原型上
   * @param {Array} imgs 需要预览的图片数组
   */
  Vue.prototype.$preview = function (imgs = []) {
    instance.showPreview = true
    instance.previewImages = imgs
  }
}

export default Preview

然后在main.js中引入使用

import Preview from './utils/preview'

Vue.use(Preview)