img-previewer
像 iOS 相册一样看图：照片从原位放大到屏幕中央，关闭时再缩回原处。动画全部由 CSS transform 驱动，切换、缩放都很顺滑。
- ≈ 5 KB gzip 后的 JS
- 0 依赖
- 支持双指缩放和键盘操作
npm i img-previewer
操作方式
打开预览后可以这样操作，移动端支持双指缩放。
- 缩放图片鼠标滚轮或 + -
- 拖动图片放大后按住拖动
- 上一张 / 下一张← →
- 关闭预览Esc 或点击空白处
- 旋转、缩放、重置右上角工具栏
安装
npm i img-previewer
# 或
pnpm add img-previewer也可以直接通过 CDN 引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-previewer/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/img-previewer/dist/img-previewer.min.js"></script>使用
传入一个 CSS 选择器，选择器内的所有 <img> 都可以点击预览，不需要改动已有的 HTML。
import ImgPreviewer from 'img-previewer'
import 'img-previewer/dist/index.css'
const previewer = new ImgPreviewer('#app', {
fillRatio: 0.8,
onShow({ index, img }) {},
onHidden({ index, img }) {}
})图片是动态加载的？渲染完成后调用 previewer.update() 即可。
配置项
| 名称 | 说明 | 默认值 |
|---|---|---|
fillRatio | 图片占预览区域的比例 | 0.8 |
dataUrlKey | 存放大图地址的属性名 | src |
triggerEvent | 触发预览的事件，click 或 dblclick | click |
imageZoom | 缩放配置：min、max、step | 1 / 5 / 0.1 |
style | 样式配置：modalOpacity、headerOpacity、zIndex | 0.6 / 0 / 99 |
i18n | 工具栏提示文字，默认按浏览器语言显示中文或英文 | 自动 |
bubblingLevel | 向上检查父元素是否被 CSS 隐藏的层数 | 0 |
hideOriginal | 预览时隐藏页面上原位的图片 | true |
duration | 打开和关闭动画的时长（毫秒），切换和缩放动画按比例跟随 | 400 |
onBeforeShow | 打开前调用，返回 false 取消打开 | — |
onShow | 开始打开时调用 | — |
onShown | 打开动画结束后调用 | — |
onChange | 切换图片时调用，额外带 prevIndex | — |
onBeforeHide | 关闭前调用，返回 false 取消关闭 | — |
onHide | 开始关闭时调用（别名 onClose） | — |
onHidden | 关闭动画结束后调用 | — |
生命周期回调都会收到 { index, img }，img 是页面上原来的图片元素。
实例方法
| 方法 | 说明 |
|---|---|
show(index) | 预览指定索引的图片 |
next() / prev() | 切换到下一张 / 上一张 |
hide() | 关闭预览 |
update() | 重新收集图片列表 |
getTotalIndex() | 获取最后一张图片的索引 |
destroy() | 销毁实例，移除事件监听和 DOM |