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 相关文章推荐
一个JS的日期格式化算法示例
Jul 31 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python编写登陆接口的方法
2017/07/10 Python
scrapy爬虫实例分享
2017/12/28 Python
解读python logging模块的使用方法
2018/04/17 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
python 获取字典键值对的实现
2020/11/12 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
农村婚礼主持词
2014/03/13 职场文书
产品销售计划书
2014/05/04 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
工会换届选举方案
2014/05/21 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
python 如何在list中找Topk的数值和索引
2021/05/20 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android