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


Posted in Javascript onJuly 13, 2019

这是移动端使用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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 布尔型分析
Dec 22 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
JS+php后台实现文件上传功能详解
Mar 02 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 #Javascript
小程序实现悬浮搜索框
Jul 12 #Javascript
小程序实现搜索框功能
Mar 26 #Javascript
iview的table组件自带的过滤器实现
Jul 12 #Javascript
es6中比较有用的7个技巧小结
Jul 12 #Javascript
echarts大屏字体自适应的方法步骤
Jul 12 #Javascript
javascript实现简易聊天室
Jul 12 #Javascript
You might like
xml+php动态载入与分页
2006/10/09 PHP
桌面中心(二)数据库写入
2006/10/09 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
Stop SQL Server
2007/06/21 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
Android面试宝典
2013/08/06 面试题
毕业生求职信范文
2014/06/29 职场文书
综合素质评价自我评价
2015/03/06 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL