php点击图片放大代码,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: {},

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：