這是移動端使用vue框架與mint-ui實現(xiàn)的父用子之間的通信實現(xiàn)的圖片預覽的功能，在父組件中每一張圖片都可以實現(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()//阻止事件冒泡，避免點擊預覽的圖片穿透遮罩層   },   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>