vue-鼠标经过图片放大组件

效果图：

 组件代码:

<template>
  <div class='resize_picture'>
    <img :src="imgSrc" alt="背景" :style="imageStyle" @mouseover="zoomIn" @mouseout="zoomOut">
    <div class="title">{{ title }}</div>
  </div>
</template>

<script>
export default {
  name: 'ResizePicture',
  data() {
    return {
      imageStyle: {}, //图片样式
    }
  },
  props: {
    // 背景图片
    imgSrc: {
      require: true,
    },
    // 显示图片
    title: {
      require: true,
    },
  },
  methods: {
    // 鼠标经过
    zoomIn() {
      this.imageStyle = {
        transform: 'scale(1.2)',
      }
    },
    // 鼠标离开
    zoomOut() {
      this.imageStyle = {
        transform: 'scale(1)',
      }
    },
  },
}
</script>
<style  lang="less" scoped>
.resize_picture{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .title{
    position: absolute;
    bottom: 1%;
    left: 0;
    padding: 0 10px;
    z-index: 1;
  }
}
img{
  width: 100%;
  height: 100%;
}

</style>

 组件引用代码：

      <ResizePicture :imgSrc="imgSrc" :title="title"></ResizePicture>