這是移動(dòng)端使用vue框架與mint-ui實(shí)現(xiàn)的父用子之間的通信實(shí)現(xiàn)的圖片預(yù)覽的功能氢惋，在父組件中每一張圖片都可以實(shí)現(xiàn)圖片放大查看哩罪。
子組件
<!--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()//阻止事件冒泡，避免點(diǎn)擊預(yù)覽的圖片穿透遮罩層
},
handleChange(value){
//向父組件傳遞輪播圖索引俐筋，解決加載圖片的問題
this.$emit("handleChange",value)
}
},
watch:{
isShow:{//判斷遮罩是否顯示，顯示時(shí)底層頁面無法滾動(dòng)，隱藏后滾動(dòng)條回到顯示時(shí)的位置
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(){//點(diǎn)擊遮罩層路媚，遮罩層隱藏
this.showImg = false;
},
handleChange(value){
this.defaultIndex = value;
},
collectImgSrc(){//點(diǎn)擊圖片放大
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"));//設(shè)置初始顯示的輪播圖的索引
}
}
}
}
}
</script>
在全局樣式global.css里面設(shè)置圖片預(yù)覽居中
/*圖片點(diǎn)擊放大組件中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;
}
