1.需要添加鼠标移入移出事件：
当前@mouseenter="mouseenterBox($event)"事件中的this=event.target
2.需要对父容器添加绝对定位，子容器添加相对定位样式
3.使用animate实现图片的宽度、高度、位移的缩放
<template><div><div class="solutionList" @mouseenter="mouseenterBox($event)" @mouseleave="mouseleaveBox($event)"><div class="imgCont"><img src="test.png" ref="imgList" /></div></div></div>
</template><script>
export default {name: '',props: [''],data () {return {oldW: '',oldH: ''}},components: {},computed: {},beforeMount () {},mounted () {this.oldW = this.$refs.imgList.width; this.oldH = this.$refs.imgList.height;},methods: {mouseenterBox (event) {let target = event.target, w = this.$refs.imgList.width, h = this.$refs.imgList.height, scale = 0.05;let wValue = w + w * scale, hValue = h + h * scale, spaceW = w * scale / 2, spaceH = h * scale / 2;$(target).find('img').stop().animate({width: wValue,height: hValue,left: -spaceW,top: -spaceH}, 200)},mouseleaveBox (event) {let target = event.target;$(target).find('img').stop().animate({width: this.oldW,height: this.oldH,left: 0,top: 0}, 200)}},watch: {}
}
</script>
<style scoped>
.imgCont {width: 100%;height: 200px;overflow: hidden;position: relative;
}
.solutionList {cursor: pointer;
}
.solutionList img {width: 100%;height: 200px;position: absolute;left: 0;right: 0;
}
</style>