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

这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。

子组件

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

在全局样式global.css里面设置图片预览居中

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。