Vue 图片放大镜

 效果图如下：

首先下载插件

npm i image-zoom-vue -S

在需要的数组上引入插件（全局引入也可以，看使用的地方多不多）

<template>
  <div id="app" style="width: 500px;height: 500px;">
    <magnifier :options="magnifierOptions"></magnifier>
  </div>
</template>
<script>
import magnifier from 'image-zoom-vue'

  export default {
    components: {
      magnifier
    },
    data() {
      return {
        magnifierOptions: {
          src: '../src/back.png',
          srcLarge: '../src/back.png'
        }
      }
    }
  }
</script>

以下是options所有设置