父页面使用 home.vue
<template>
<imageviewer :imgWidth='30' :imgHeight='30' :imglist="imageArr"/>
</template>
<script>
import imageviewer from "@/components/imageViewer/index.vue"
export default {
components:{ imageviewer},
data(){
return{
imageArr:['http://asdasasdssd.png','http://asdasasdssd.png']
}
}
}
</script>
组件代码 imageViwer.vue
<template>
<div class="demo-image__preview">
<!-- 数组多张,只显示第一张[点开可左右箭头查看其他图片] -->
<el-image
v-if="imglist[0] && showFirst"
fit='contain '
:style="{width:imgWidth+'px',height:imgHeight+'px',margin:'5px'}"
:src="imglist[0]"
:preview-src-list="imglist"
@click.stop="handleClickItem">
</el-image>
<!-- 全部显示 -->
<template v-if="imglist[0] && !showFirst">
<el-image
v-for="(v,i) in imglist" :key='i'
fit='contain '
:style="{width:imgWidth+'px',height:imgHeight+'px',margin:'5px'}"
:src="imglist[i]"
:preview-src-list="imglist"
@click.stop="handleClickItem">
</el-image>
</template>
</div>
</template>
<script>
export default {
props:{
showFirst:{
type:Boolean,
default:false
},
imglist:{
type:Array,
default:()=>[]
},
imgWidth:{
type:Number,
default:50
},
imgHeight:{
type:Number,
default:50
},
},
methods:{
handleClickItem(){
setTimeout( ()=>{
let domImageMask = document.querySelector(".el-image-viewer__mask");
if (!domImageMask) {
console.log("mask不存在")
return;
}
console.log("mask存在")
this.$nextTick(()=>{
domImageMask.addEventListener("click", () => {
let close = document.querySelector(".el-image-viewer__close")
if(close)close.click();
return
});
})
},0)
},
}
}
</script>
<style lang='scss' scoped>
/deep/ .demo-image__preview{
width: 50px;
height: 50px;
}
/deep/ .el-icon-arrow-right:before {
content: "\e6e0";
color:#fff;
}
</style>