pc 图片预览放大 端vue_vue实现点击图片放大效果

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

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

　　　　　　

export default {

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

methods: {

bigImg() {

// 发送事件

this.$emit('clickit')

}

}

}

/*动画*/

.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;

}

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

　　　　　　　　

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: {},

}

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