vue图片预览插件，支持鼠标缩放：useful-photo-preview

前言

我现在在做的vue项目使用的组件库是Ant Design的vue版本，里面有个图片组件，但是用起来不顺心。在bing找了一些，要么不适配vue3.x，要么就是直接报错😥。

于是就自己整了一个，希望也可以帮助像我一样的小伙伴🤗

我第一次发布npm包，也是第一次写文章，欢迎大佬们评论

介绍

此插件使用简单方便，只有一个api，一个事件，避免了复杂的文档和使用教程。

其依赖于screenfull，安装插件时会自动安装，如出现未找到screenfull，使用npm i screenfull安装即可

源码在github，一起学习，共同进步。希望有个star🙄

如何使用

已发布于npm，可直接安装使用

安装

npm i useful-photo-preview

使用

• 引用

  import imgShow from useful-photo-preview
  

• 使用

  <img-show :src="img_url" @close="onclose"></img-show>
  

功能

• 全屏预览，复位，左右旋转

• 鼠标滚轮放大缩小

• 鼠标拖动移动位置

• 双击进入和退出全屏预览

• 点击空白位置退出(调用@close事件)

• ESC键退出(调用@close事件)

• 宽缩放最小150px 左右，最大5000px 左右

预览

全屏时背景会变成纯黑色

API

• 参数

  • :src 图片链接，或base64数据

• 事件

  • @close 关闭事件