1.建立子组件,来实现图片方法功能: BigImg.vue
<template> <!-- 过渡动画 --> <transition> <div @click="bigImg"> <!-- 遮罩层 --> <div></div> <div> <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> <div> <div> <span v-text="pagedata.subtitle"></span> </div> <span v-text="pagedata.headline"></span> <div> <!-- 放大图片 --> <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img> <div v-text="pagedata.article"></div> <img :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>