vue实现图片预览组件封装与使用实现图片预览组件封装与使用
主要为大家详细介绍了vue实现图片预览组件封装与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一
下
这是移动端使用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);
评论0