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>

本文名称：vue实现图片预览组件封装与使用-创新互联
转载来于：https://www.cdcxhl.com/article46/piheg.html

成都网站建设公司_创新互联，为您提供移动网站建设、Google、网站设计公司、云服务器、定制网站、建站公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联