时间:2021-05-26
这是移动端使用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里面设置图片预览居中
#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;}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Vue开发之封装分页组件与使用。分享给大家供大家参考,具体如下:使用elementui中的el-pagination来封装分页组件paginati
本文实例讲述了vue组件开发原理与实现方法。分享给大家供大家参考,具体如下:概要vue的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比
本文实例讲述了Vue+Node.js+MongoDB图片上传组件实现图片预览和删除功能。分享给大家供大家参考,具体如下:公司要写一些为自身业务量身定制的的组件,
结合vue+element-ui+vue-quill+editor二次封装成组件1.图片上传分析原因项目中使用vue-quill-editor富文本编辑器,在编
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中,文件名为transverseTree.vue代码:{{column.name}}{{c