Pic-viewer NPM

⚠ DEPRECATED

Warning
Pic Viewer 已推出 Vue 2.6/2.7/3 一体通用版本
不仅能力得到增强，为了后续的漏洞修复和迭代优化，请迁移至原作者 cloydlau 的 faim

特性

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

安装

外置依赖

vue@2

局部注册

npm i pic-viewer

<script>
import PicViewer from 'pic-viewer'

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

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

全局注册

npm i pic-viewer

import PicViewer from 'pic-viewer'

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

CDN + ESM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <pic-viewer
      value="xxx"
      qrcode
    ></pic-viewer>
  </div>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.min.js",
        "pic-viewer": "https://cdn.jsdelivr.net/npm/pic-viewer@0.11/dist/pic-viewer.mjs"
      }
    }
  </script>
  <script type="module">
    import Vue from 'vue'
    import PicViewer from 'pic-viewer'

    new Vue({
      components: { PicViewer },
    }).$mount('#app')
  </script>
</body>

</html>

CDN + IIFE

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <pic-viewer
      value="xxx"
      qrcode
    ></pic-viewer>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/pic-viewer@0.11"></script>
  <script>
    new Vue({
      components: { PicViewer },
    }).$mount('#app')
  </script>
</body>

</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` 标签

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

获取 Viewer.js 实例

picViewerRef.value.viewer.view()

获取 Swiper 实例

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

const picViewerRef = ref()
</script>

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

二维码清晰度

默认的图片 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>