# yj-pic-viewer

> Pic Viewer

Latest version **1.0.1** (published 2023-11-28) · 0 weekly downloads

## Install

```sh
npm install yj-pic-viewer
pnpm add yj-pic-viewer
yarn add yj-pic-viewer
bun add yj-pic-viewer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-11-28 |
| First published | 2023-11-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | hanneil |
| Keywords | starry |

## Links

- npm: https://www.npmjs.com/package/yj-pic-viewer
- npm.io page: https://npm.io/package/yj-pic-viewer

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.25

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-11-28
- 1.0.0 — 2023-11-24

## README

<h1 align="center">Pic Viewer</h1>

<p align="center">
  图片画廊。
</p>

<br>

## 特性

- [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)
- 任意绑定值类型
- 局部注册并传参，或全局注册并传参

<br>

## 安装

### 局部注册

```shell
npm i yj-pic-viewer
```

```vue
<template>
  <PicViewer
    v-bind="{
      /* 局部配置 */
    }"
  />
</template>

<script>
import PicViewer from 'yj-pic-viewer'

export default {
  components: { PicViewer }
}
</script>
```

### 全局注册

```shell
npm i yj-pic-viewer
```

```ts
import PicViewer from 'yj-pic-viewer'

Vue.use(PicViewer, {
  // 全局配置
})
```

<br>

## 属性

| 名称          | 说明                                                    | 类型                                  | 默认值                                                              |
| ------------- | ------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------- |
| value         | 绑定值                                                  | any                                   |                                                                     |
| pattern       | 展示模式（`'waterfall'`, `'swiper'` 或 `'table-cell'`） | string                                | `undefined`（即文档流）                                             |
| width         | 图片统一宽度, 可在数据项单独配置每一张图片的不同宽高      | string |         148px     |
| height         | 图片统一高度, 可在数据项单独配置每一张图片的不同宽高      | string |        auto     |
| tableCellHeight         | `pattern` 为 `'table-cell'` 模式时的高度                                       | string |         50px     |
| 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`

<br>

## 事件

| 名称  | 说明           | 回调参数                     |
| ----- | -------------- | ---------------------------- |
| click | 点击图片后触发 | (src: string, index: number) |

<br>

## 插槽

| 名称     | 说明              |
| -------- | ----------------- |
| 默认插槽 | 自定义 `img` 标签 |

```html
<PicViewer>
  <template #default="{ src, index }">
    <img :src="src" />
    <div>第{{ index + 1 }}张</div>
  </template>
</PicViewer>
```

<br/>

## 获取 Viewer.js 实例

`picViewerRef.value.viewer.view()`

<br>

## 获取 Swiper 实例

```vue
<template>
  <PicViewer
    ref="picViewerRef"
    pattern="swiper"
    :swiperProps="{
      on: {
        init: () => {
          $nextTick(() => {
            console.log(picViewerRef.swiper)
          })
        }
      }
    }"
  />
</template>

<script setup>
import PicViewer from 'yj-pic-viewer'

const picViewerRef = ref()
</script>
```

<br>

## 二维码清晰度

默认的图片 CSS 高度为 148px (与 `el-upload` 保持一致)，默认的二维码分辨率为 444 × 444 (三倍图)，如果你增大了图片的 CSS 尺寸，将导致图片变模糊。

解决方式：将二维码分辨率设置为展示尺寸的三倍。

```vue
<template>
  <PicViewer
    :qrcodeProps="{
      width: 900,
      height: 900
    }"
  />
</template>

<style scoped>
:deep(.pic-viewer) img {
  width: 300px;
  height: 300px;
}
</style>
```

---
_Source: https://npm.io/package/yj-pic-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._