# pic-viewer
> Picture viewer.
Latest version **0.12.1** (published 2024-05-11) · MIT license · 0 weekly downloads
## Install
```sh
npm install pic-viewer
pnpm add pic-viewer
yarn add pic-viewer
bun add pic-viewer
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.12.1 |
| Published | 2024-05-11 |
| First published | 2020-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tanzhiwen, yang06061079, moer, wangyuan389, hanneil, cloydlau |
| Keywords | vue, img, image, pic, picture, viewer, gallery, viewerjs, qrcode, swiper, carousel, masonry, waterfall |
## Links
- npm: https://www.npmjs.com/package/pic-viewer
- npm.io page: https://npm.io/package/pic-viewer
## Dependencies (7)
- [qrcode](https://npm.io/package/qrcode.md) latest
- [swiper](https://npm.io/package/swiper.md) latest
- [viewerjs](https://npm.io/package/viewerjs.md) latest
- [lodash-es](https://npm.io/package/lodash-es.md) latest
- [validator](https://npm.io/package/validator.md) latest
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) latest
- [vue-global-config](https://npm.io/package/vue-global-config.md) 0.4.0
## Alternatives
- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads
## Recent versions
- 0.12.1 (latest) — 2024-05-11
- 0.12.0 — 2024-05-11
- 0.11.3 — 2023-11-25
- 0.11.2 — 2023-10-03
- 0.11.1 — 2023-10-03
- 0.11.0 — 2023-10-03
- 0.10.0 — 2023-01-13
- 0.9.0 — 2023-01-11
- 0.8.4 — 2022-12-16
- 0.8.3 — 2022-12-09
- 0.8.2 — 2022-12-09
- 0.8.1 — 2022-12-08
- 0.8.0 — 2022-12-08
- 0.7.0 — 2022-11-30
- 0.6.4 — 2022-11-30
- … 45 more at https://npm.io/package/pic-viewer/versions
## README
Pic Viewer
图片画廊。
## 特性
- [Viewer.js](https://github.com/fengyuanchen/viewerjs) + [Swiper](https://swiperjs.com) + [node-qrcode](https://github.com/soldair/node-qrcode) 组合拳
- 多样的展示形式：文档流/瀑布流/轮播图/表格嵌套
- 灵活的数据类型：URL/Base64/二维码/[object URL](https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images)
- 任意绑定值类型
## 安装
### 外置依赖
- vue@2
### 局部注册
```shell
npm i pic-viewer
```
```vue
```
### 全局注册
```shell
npm i pic-viewer
```
```ts
import PicViewer from 'pic-viewer'
Vue.use(PicViewer, {
// 全局配置
})
```
### CDN + ESM
```html
```
### CDN + IIFE
```html
```
## 属性
| 名称 | 说明 | 类型 | 默认值 |
| ------------- | ------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------- |
| value | 绑定值 | any | |
| pattern | 展示模式（`'waterfall'`, `'swiper'` 或 `'table-cell'`） | string | `undefined`（即文档流） |
| srcAt | 图片 `src` 的位置 | string / symbol / (value: any) => any | |
| viewerjs | 是否启用 Viewer.js | boolean | `true` |
| viewerjsProps | Viewer.js 的参数 | object | `{ zIndex: 5000, zoomRatio: 0.4 }` |
| swiperProps | Swiper 的参数 | object | `{ observer: true }` |
| qrcode | 是否将 `value` 转换为二维码 | boolean / `'auto'` | `false` |
| qrcodeProps | node-qrcode 的参数 | object | `{ margin: 0, errorCorrectionLevel: 'L', width: 444, height: 444 }` |
### qrcode
如果将 `qrcode` 设为 `'auto'`，PicViewer 会自动判断是否需要转换 (`value` 为 Base64 或 URL 时不会转换)。
### srcAt
用于定位 `value` 中的图片 `src`，适用于绑定值非 `src` 本身的情况。
- 支持属性名，如 `'url'`
- 支持属性路径，如 `'data[0].url'`
- 支持 symbol 类型的属性名
- 支持 Function，如 `({ url }) => url`
## 事件
| 名称 | 说明 | 回调参数 |
| ----- | -------------- | ---------------------------- |
| click | 点击图片后触发 | (src: string, index: number) |
## 插槽
| 名称 | 说明 |
| -------- | ----------------- |
| 默认插槽 | 自定义 `img` 标签 |
```html
![]()
第{{ index + 1 }}张
```
## 获取 Viewer.js 实例
`picViewerRef.value.viewer.view()`
## 获取 Swiper 实例
```vue
```
## 二维码清晰度
默认的图片 CSS 高度为 148px (与 `el-upload` 保持一致)，默认的二维码分辨率为 444 × 444 (三倍图)，如果你增大了图片的 CSS 尺寸，将导致图片变模糊。
解决方式：将二维码分辨率设置为展示尺寸的三倍。
```vue
```
---
_Source: https://npm.io/package/pic-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._