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 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
浅析创建javascript对象的方法
May 13 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
编写自己的php扩展函数
2006/10/09 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
php排序算法实例分析
2016/10/17 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
JavaScript高级程序设计
2006/12/29 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
vue实现树状表格效果
2020/12/29 Vue.js
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python正则表达式完全指南
2017/05/25 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
linux面试相关问题
2013/04/28 面试题
大学生入党思想汇报
2014/01/01 职场文书
期中考试后的反思
2014/02/08 职场文书
早读课迟到检讨书
2014/09/25 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL