Vue.js实现图片预览组件封装与使用

发布于 2020-11-18|标签javascript
复制链接
摘记: 这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能,在父组件中每一张图片都可以实现图片放大查看。子组件 ```xhtml ..
这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能,在父组件中每一张图片都可以实现图片放大查看。子组件 ```xhtml 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; // } } } } } .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%; } ``` 父组件 ```xhtml //引入子组件 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 ``` 在全局样式global.css里面设置图片预览居中 ```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; } ``` 原文地址: https://blog.csdn.net/qq_41624010/article/details/81870511
冀ICP备17029012号-4 | 版权所有©鲍亚龙 |免责声明  | GIF图库  | NUXT版