在vue方法中使用$(this)实现图片以中心点放大

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>