组件
eslint-disable-next-line vue/valid-template-root
<template>
<!-- 过渡动画 -->
<transition name="fade">
<div class="img-view"
@click="closeBigImg">
<img :src="imgSrc"
alt="加载失败">
</div>
</transition>
</template>
<script>
export default {
props: ['imgSrc'],
methods: {
closeBigImg () {
this.$emit('clickBigImg')
}
}
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s linear;
transform: translate3D(0, 0, 0);
}
.fade-enter,
.fade-leave-active {
transform: translate3D(100%, 0, 0);
}
.img-view {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
overflow: hidden;
}
.img-view img {
width: 800px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 10000;
}
</style>
使用
<img v-for="(pic, p) in imgList"
:key="p"
@click="clickImg($event)"
style="width:102px;margin-right:10px;"
:src="pic.url"
:title="pic.name"
alt="图片加载失败" />
<!-- 图片放大组件 -->
<big-img v-if="showImg"
@clickBigImg="closeBigImg"
:imgSrc="imgSrc"></big-img>
import BigImg from '@/components/BigImg'
showImg: false,
imgSrc: ''
clickImg (e) {
if (e.currentTarget.src) {
this.imgSrc = e.currentTarget.src
this.showImg = true
}
},
closeBigImg () {
this.imgSrc = ''
this.showImg = false
},