站长资源网络编程
vue实现图片预览组件封装与使用
简介这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。子组件
这是移动端使用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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。