有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue预览图片(vue实现图片预览组件封装与使用)实现方式

vue 炮渣日记 1周前 (11-22) 13次浏览 已收录 0个评论 扫描二维码

这是移动端使用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;
}
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址