这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。
子组件
<!--html部分--> <template> <div ref="imgEnlarge" @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; }