element ui中独立出兼容ie11浏览器的图片预览组件

正好项目中有不同场景的图片预览功能需要独立使用，但element ui组件库中的预览功能是和el-image图片组件绑在一起使用的，小编分析了一下源码，el-image中的预览子组件可以独立出来，于是，小编将el-image图片组件中的el-image-viewer子组件分离出来单独使用并支持ie11，小编已经应用，这里分享给大家，有需要的朋友可以参考。

应用效果

预览组件完整源码如下：

预览组件完整代码

组件源码：

<template>
  <el-image-viewer
    v-if="show"
    :on-close="handleClose"
    :url-list="urlList"
    :z-index="zIndex"
  />
</template>

<script>
import { Image } from 'element-ui'

export default {
  name: 'WtImageViewer',
  components: {
    ElImageViewer: Image.components.ImageViewer
  },
  props: {
    urlList: {
      type: Array,
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

应用源码：

预览组件应用源码

    <!-- 图片查看器 -->
    <wt-image-viewer
      :show="imageViewerVisible"
      :url-list="imageViewerList"
      @close="imageViewerVisible=false"
    />

应用效果：

PS：若有用，欢迎点赞、收藏、关注，请关注后续更多技术分享，感谢大家。