這是移動(dòng)端使用vue框架與mint-ui實(shí)現(xiàn)的父用子之間的通信實(shí)現(xiàn)的圖片預(yù)覽的功能，在父組件中每一張圖片都可以實(shí)現(xiàn)圖片放大查看。

為廣南等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及廣南網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、廣南網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎ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){
   //向父組件傳遞輪播圖索引，解決加載圖片的問題
   this.$emit("handleChange",value)
   }
  },
  watch:{
   isShow:{//判斷遮罩是否顯示，顯示時(shí)底層頁(yè)面無法滾動(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>

本文名稱：vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://chinadenli.net/article46/piheg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、Google、網(wǎng)站設(shè)計(jì)公司、云服務(wù)器、定制網(wǎng)站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)