今天发现了一个图片放大镜插件,故来记录一下。
先来给大家看下效果:
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属性无效,查看官网案例,发现官网是没有问题的,如果有朋友解决了这个问题的,可在下方评论下解决方法。