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所有設置如下：

GitHub地址：
https://github.com/fengwenqi123/image-zoom-vue

如果對你有幫助，請點個Star吧