快捷導(dǎo)航

vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用

更新時(shí)間：2019年07月13日 09:20:30 作者：qq_41624010

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

在全局樣式global.css里面設(shè)置圖片預(yù)覽居中

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: