這是移動端使用vue框架與mint-ui實(shí)現(xiàn)的父用子之間的通信實(shí)現(xiàn)的圖片預(yù)覽的功能，在父組件中每一張圖片都可以實(shí)現(xiàn)圖片放大查看。

子組件

<!--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()//阻止事件冒泡，避免點(diǎn)擊預(yù)覽的圖片穿透遮罩層
            },
            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(){//點(diǎn)擊遮罩層，遮罩層隱藏
                this.showImg = false;
            },
            handleChange(value){
                this.defaultIndex = value;
            },
            collectImgSrc(){//點(diǎn)擊圖片放大
                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"));//設(shè)置初始顯示的輪播圖的索引
                    }
                }

            }
        }
    }
</script>

在全局樣式global.css里面設(shè)置圖片預(yù)覽居中

/*圖片點(diǎn)擊放大組件中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;
}