特性

• Viewer.js + Swiper + node-qrcode 组合
• 多样的展示形式：文档流/瀑布流/轮播图/表格嵌套
• 灵活的数据类型：URL/Base64/二维码/object URL
• 任意绑定值类型
• 局部注册并传参，或全局注册并传参

安装

局部注册

npm i yj-pic-viewer

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

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

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

全局注册

npm i yj-pic-viewer

import PicViewer from 'yj-pic-viewer'

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

属性

| 名称 | 说明 | 类型 | 默认值 | | ------------- | ------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------- | | 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

事件

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

插槽

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

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

获取 Viewer.js 实例

picViewerRef.value.viewer.view()

获取 Swiper 实例

<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>

二维码清晰度

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

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

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

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