本文实例为大家分享了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);　　} 　　　　.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://ponents: { 'big-img':BigImg},　　methods: {　　　　clickImg(e) {　　　　　　this.showImg = true;　　　　　　// 获取当前图片地址　　　　　　this.imgSrc = e.currentTarget.src;　　　　},　　　　viewImg(){　　　　　　this.showImg = false;　　　　},　　},　　watch: {},}</script><style></style>

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