vue实现图片预览组件的封装与使用

这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。

子组件

<!--html部分-->
<template>
    <div id="imgEnlarge" ref="imgEnlarge" class="img-bg" @click="imgBgHide" v-show="isShow">
          <mt-swipe :auto="0" :show-indicators="false" :continuous=false :defaultIndex="defaultIndex" @change="handleChange">
                <mt-swipe-item v-for="(item,index) in imgSrc" :key="index">
                      <img v-lazy="item" @click="handleClick"/>
                </mt-swipe-item>
          </mt-swipe>
    </div>
</template>
<!--js部分-->
<script>
    export default{
        data(){
            return{
                scroll:0
            }
        },
        props:{
            imgSrc:{
                type:Array
            },
            defaultIndex:{
                type:Number,
                default:0
            },
            isShow:{
                type:Boolean,
                deflault:false
            }
        },
        methods:{
            imgBgHide(){
                  this.$emit("imgBgHide") //向父组件传递事件
            } ,
            handleClick(e){
                  e.stopPropagation()//阻止事件冒泡，避免点击预览的图片穿透遮罩层
            },
            handleChange(value){
            //向父组件传递轮播图索引，解决加载图片的问题
            this.$emit("handleChange",value)
            }
        },
      watch:{
            isShow:{//判断遮罩是否显示，显示时底层页面无法滚动，隐藏后滚动条回到显示时的位置
                 handler(newVal,oldVal){
                    if(newVal==true){
                        this.scrolly = document.body.scrollTop;
                        document.body.style.position = "fixed";
                    }else{
                        document.body.style.position = "static";
                        document.body.scrollTop = this.scrolly; //
                    }
                } 
            }
      }

    }
</script>
<!--样式部分-->
<style scoped>
      .img-bg {
            width:100%;
             height:100%;
             position:fixed;
             left:0;
             top:0;
             z-index:9999;
             background:rgba(0,0,0,1);
      }
      .img-bg img{
              width:auto;
              height:auto;
              max-width:100%;
              max-height:100%;
       }
</style>

父组件

<!--html部分-->
<template>
  <img-view :isShow="showImg" :imgSrc="imgSrc" @imgBgHide="imgBgHide" :deflaultIndex="defaultIndex" @handleChange="handleChange"></img-view>
</template>
<!--js部分-->
<script>
    //引入子组件
    import imgView from '@/components/common/imgEnlarge.vue';
    export default {
        data(){
            return{
                showImg:false,
                imgSrc:[],
                defaultIndex:0
            }
        },
        components:{imgView},
        mounted(){
            this.collectImgSrc()
        },
        methods:{
            imgBgHide(){//点击遮罩层，遮罩层隐藏
                this.showImg = false;
            },
            handleChange(value){
                this.defaultIndex = value;
            },
            collectImgSrc(){//点击图片放大
                var _this = this;
                var src = document.getElementsByTagName("img");
                for(var i=0;i<src.length;i++){
                    _this.imgSrc.push(src[i].getAttribute("src"));
                    src[i].setAttribute("data-index",i);
                    src[i].onclick = function(e){
                        _this.showImg = true;
                        _this.defaultIndex = parseInt(e.target.getAttribute("data-index"));//设置初始显示的轮播图的索引
                    }
                }

            }
        }
    }
</script>

在全局样式global.css里面设置图片预览居中

/*图片点击放大组件中swipe图片居中*/
#imgEnlarge .mint-swipe-item-wrap > div {
    visibility:hidden;
    display:flex;
    -moz-box-pack:center;
    -webkit-box-pack:center;
    justify-content:center;
    -moz-box-align:center;
    -webkit-box-align:center;
    align-items:center;
    -webkit-align-items:center;
}
#imgEnlarge .mint-swipe-item-wrap > div.is-active {
    visibility:visible;
    display:flex;
    -moz-box-pack:center;
    -webkit-box-pack:center;
    justify-content:center;
    -moz-box-align:center;
    -webkit-box-align:center;
    align-items:center;
    -webkit-align-items:center;
}