封装一个Element-UI 图片查看组件。【可配置宽高、是否只显示第一张、点击模态部分可隐藏】

最新推荐文章于 2024-07-01 17:56:37 发布

ThridTianFuStreet小貂蝉

最新推荐文章于 2024-07-01 17:56:37 发布

阅读量410

点赞数 9

分类专栏： Vue与ElementUI 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Blues_han/article/details/135422156

版权

Vue与ElementUI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中使用自定义组件imageviewer，展示图片列表，包括单张图片的预览和多张图片的轮播，以及处理图片点击事件的逻辑。

摘要由CSDN通过智能技术生成

父页面使用 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  //注：DOM消失会报错，所以写一个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>