巧用element-ui自带隐藏的图片查看器el-image-viewer浏览图片(附兼容IE骚操作)

随着版本的更新Element UI新增了新的组件，例如：Image，这是官方文档中有写的

但我的需求并不是展示图片后再点击图片打开大图浏览，需求可能是一个文字，点击后查看大图，但又不想引入其他npm插件，例如这样：

食用方法

通过翻看Image组件源码，
地址：https://github.com/ElemeFE/element/blob/dev/packages/image/src/main.vue
发现大图预览是一个小组件el-image-viewer：

在打开看看el-image-viewer小组件源码的props，
地址：https://github.com/ElemeFE/element/blob/dev/packages/image/src/image-viewer.vue
发现如下：

props: {urlList: {type: Array,default: () => []},zIndex: {type: Number,default: 2000},onSwitch: {type: Function,default: () => {}},onClose: {type: Function,default: () => {}},initialIndex: {type: Number,default: 0}}

从字面意思不难理解它绑定参数的含义，

urlList 绑定的文件列表
zIndex 查看器层级
onSwitch 图片切换事件
onClose 查看器关闭事件
initialIndex 初始化展示哪张图片

这里我们只需要使用到的就只有urlList与onClose两个属性 ，一个用来放图片链接一个用来关闭查看器。

需要使用的属性我们知道了，然后我们就在代码里面引入image-viewer就可以直接使用。

值得注意的是，如果el-image-viewer组件在el-dialog里面，el-dialog的层级是优先的，因此我们需要属性z-index去更改el-image-viewer组件样式的层级：

补充：

以上方法不兼容IE！！！因为element没有将此组件暴露出去并经过webpack打包，直接引入该组件的话IE有兼容性问题，大多数网上的都是上面的方法。

这里我们利用已经暴露的Image组件包含的el-image-viewer来重新实现我们的目的，它由于暴露出来并经过webpack打包编译

因此以下方法是兼容IE的（推荐使用此方法，也无须再引入任何组件！）：

css:

/*隐藏el-image图片组件中不需要展示的的img标签*/
.hideImgDiv {/deep/ .el-image__inner {display: none;}
}

作者：追寻1989
链接：https://www.jianshu.com/p/53b2fa92965e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

兼容IE的方法只适合一个的时候，列表多个就不行会有弹窗只展示最后一个图片的问题

多个列表可以用以下方法

 刚开始一想到用elementui自带的查看大图功能会比较方便，但是，后来写上才发现，用官方自带的就必须要添加一张默认图片，可是这张图片需求是默认不能展示的，这就犯了难，于是思前想后，痛定思痛，想到了一个还算不错的解决办法，就是把图片默认定位到文字的位置，大概就是这样

// 展示图片的样式
.bigImg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;opacity: 0;
}

把图片默认放在文字的上面，可是这样就挡住了文字，没关系，这时候只要设置透明度就可以了，把透明度设置成0，这样图片就不会出现了，但是点击文字的时候还是可以查看大图的

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！