使用的index.vue代碼

<template><img :src="imgUrl" @click="clickImg($event)"><big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img> </template> import BigImg from '../../components/imgView.vue' export default {components: {'big-img': BigImg},methods: {clickImg (e) {this.showImg = truethis.imgSrc = e.currentTarget.src},viewImg () {this.showImg = false}} }

組件的代碼：

<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: absolute;top: 0px;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: fixed;width: 26%;/*height: 80%;*/top: 50%;left: 50%;transform: translate(-50%,-50%);margin: auto;z-index: 1000; } </style>

?

轉載于:https://www.cnblogs.com/qq364735538/p/7338858.html

總結

以上是生活随笔為你收集整理的vue组件实现查看大图效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。