這是移動端使用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>

本文名稱：vue實現圖片預覽組件封裝與使用-創新互聯
轉載來于：http://www.yijiale78.com/article46/piheg.html

成都網站建設公司_創新互聯，為您提供移動網站建設、Google、網站設計公司、云服務器、定制網站、建站公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯