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

<!--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>

/*图片点击放大组件中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;}