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;
}