yj-pic-viewer

Pic Viewer

图片画廊。

特性

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