Vue - 图片放大镜（vue-piczoom）

vue-piczoom：https://www.npmjs.com/package/vue-piczoom/v/1.0.6

使用图片放大镜插件 vue-piczoom

1. 安装
   npm install vue-piczoom --save

2. 使用

   <template>
     <div class="wrap">
       <!-- 组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内 -->
       <div style="width: 500px; height: 500px">
         <!-- 第三步：标签使用 -->
         <pic-zoom url="/static/img/1.jpg" :scale="3"></pic-zoom>
       </div>
     </div>
   </template>
   <script>
   // 第一步：引入vue-piczoom
   import PicZoom from "vue-piczoom";
   export default {
     // 第二部：注册组件
     components: {
       PicZoom,
     },
     data() {
       return {};
     },
   };
   </script>
   <style scoped>
   </style>
   

3. Config 配置

   参数	说明	默认值
   url	图片地址	string required
   big-url	大图地址	string null
   scale	图片放大倍数	number 2.5
   scroll	放大时页面是否可滚动	boolean fasle
   show-edit	是否显示旋转图片按钮	boolean fasle