首页 / VUE / vue实现图片预览组件封装与使用
vue实现图片预览组件封装与使用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue实现图片预览组件封装与使用,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2942字,纯文字阅读大概需要5分钟。
内容图文
![vue实现图片预览组件封装与使用](/upload/InfoBanner/zyjiaocheng/331/0eb69ad87728447bb860b05f215ba965.jpg)
这是移动端使用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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vue实现图片预览组件封装与使用全部内容,希望文章能够帮你解决vue实现图片预览组件封装与使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。