<!--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){   //向父組件傳遞輪播圖索引，解決加載圖片的問(wèn)題   this.$emit("handleChange",value)   }  },  watch:{   isShow:{//判斷遮罩是否顯示，顯示時(shí)底層頁(yè)面無(wú)法滾動(dòng)，隱藏后滾動(dòng)條回到顯示時(shí)的位置     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>

/*圖片點(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;}