正好项目中有不同场景的图片预览功能需要独立使用,但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:若有用,欢迎点赞、收藏、关注,请关注后续更多技术分享,感谢大家。