Yj-pic-viewer NPM

特性

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>

starry

vue

@everything-registry/sub-chunk-3205

1.0.1

6 months ago

1.0.0

6 months ago