vue点击后html放大,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: {},

}

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