vue实现点击图片放大效果

本文实例为大家分享了vue点击图片放大展示的具体代码，供大家参考，具体内容如下

1.建立子组件,来实现图片方法功能: BigImg.vue

<template>
  <!-- 过渡动画 -->
  <transition name="fade">
   <div class="img-view" @click="bigImg">
  

 <!-- 遮罩层 -->
  

 <div class="img-layer"></div>
  

 <div class="img">
  


 <img :src="imgSrc">
  

 </div>
  
</div>

</transition>
</template>
<script>

export default {


props: ['imgSrc'],//接受图片地址


methods: {



bigImg() {



// 发送事件




this.$emit('clickit')



}


}

}
</script>
<style scoped>

/*动画*/

.fade-enter-active,

.fade-leave-active {


transition: all .2s linear;


transform: translate3D(0, 0, 0);

}

.fade-enter,

.fade-leave-active {


transform: translate3D(100%, 0, 0);

}
 

/* bigimg */

.img-view {


position: inherit;


width: 100%;


height: 100%;

}

/*遮罩层样式*/

.img-view .img-layer {


position: fixed;


z-index: 999;


top: 0;


left: 0;


background: rgba(0, 0, 0, 0.7);


width: 100%;


height: 100%;


overflow: hidden;

}

/*不限制图片大小，实现居中*/

.img-view .img img {


max-width: 100%;


display: block;


position: absolute;


left: 0;


right: 0;


margin: auto;


z-index: 1000;

}
</style>

2.在父类中使用子组件:

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
<div class="contents">


<div class="group">



<div class="special">




<span v-text="pagedata.subtitle"></span>



</div>



<span class="text-muted" v-text="pagedata.headline"></span>



<div class="group_img">




<!-- 放大图片 -->




<big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
 





<div class="text" v-text="pagedata.article"></div>




<img id="smallImg" :src="pagedata.imgurl" @click="clickImg($event)">



</div>


</div>

</div>
</template>
 
<script>
import BigImg from '../../index/moduleStyles/BigImg.vue';
export default {

data () {


return {



showImg:false,



imgSrc: ''


}

},

props: ['pagedata'],

computed: {},

components: { 'big-img':BigImg},

methods: {


clickImg(e) {



this.showImg = true;



// 获取当前图片地址



this.imgSrc = e.currentTarget.src;


},


viewImg(){



this.showImg = false;


},

},

watch: {},
}
</script>
<style>
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。