开箱即用的vue图片放大镜

今天发现了一个图片放大镜插件，故来记录一下。

先来给大家看下效果：

1.安装插件

yarn add vue-piczoom

2.在项目中引入(要在components里面注册的)

<script>
import PicZoom from 'vue-piczoom'
export default {
  name: "index",
  components: {   PicZoom },

};

3.在模板中使用

<template>
  <div>
    <div style="width: 400px; height: 400px">
      <picZoom
        url="https://img0.baidu.com/it/u=167913364,4100310431&fm=26&fmt=auto"
      ></picZoom>
    </div>
    <div></div>
  </div>
</template>

4.最后给大家看下常用参数

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

注：小编实际使用时发现show-edit属性无效，查看官网案例，发现官网是没有问题的，如果有朋友解决了这个问题的，可在下方评论下解决方法。