在项目中,会有对图片预览查看的需求。当使用el-dialog进行图片预览实现时,会出现长图片占满整个浏览器,致使图片不能完整的显示的情况,这对使用者的体验非常不友好,使用elementui提供的el-image-viewer就能解决这个问题。
一,封装el-image-viewer组件
<template>
<div>
<el-image
v-if="srcUrl"
style="width: 160px; height: 116px"
:src="srcUrl"
:style=styleC
@click="onPreview(srcUrl)"
>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="[showViewerUrl]"
:zIndex="zIndex"
/>
</div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
components: {
ElImageViewer,
},
data() {
return {
showViewer: false, // 显示查看器
showViewerUrl:"",
}
},
name: 'KtButton',
props: {
srcUrl: { // 图片链接
type: String,
default: null
},
styleC: { // 图片链接,可不填
type: String,
default: null
},
zIndex: {//使预览图片置于浏览器最外层
type: Number,
default: 9999
}
},
computed: {
},
methods: {
// 关闭查看器
closeViewer() {
this.showViewer = false
},
//打开查看器
onPreview(showViewerUrl) {
this.showViewerUrl = showViewerUrl;
this.showViewer = true
},
}
};
</script>
二,使用组件
1.注册组件
import customImg from "@/components/CustomImg"
export default{
components:{
customImg
},
2.使用组件
<el-carousel-item v-if="v.fileList && v.fileList.length>0" v-for="(item,index) in v.fileList" trigger="click">
<!-- <el-image v-if="item.type==0" style="margin-left:40px;cursor:pointer" class="imgUPload_" :src="baseImgURL+item.url" @click.native="previewImgCard(baseImgURL+item.url)" >
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image> -->
//在这里使用组件,srcUrl传入需要预览的url地址
<customImg :srcUrl="baseImgURL+item.url" v-if="item.type==0" style="margin-left:40px;cursor:pointer" class="imgUPload_"> </customImg>
<video v-if="item.type == 1" style="margin-left:40px" width="200px" controls :autoplay="false" :src="baseImgURL+item.url"></video>
<audio v-if="item.type == 2" style="width:200px;margin-left:40px" controls :autoplay="false" :src="baseImgURL+item.url" ></audio>
</el-carousel-item>
</el-carousel>
三,效果展示
好了,一个简单的图片预览效果就出现了。