pic-viewer

pic-viewer / 图片画廊

特性

• viewerjs 的 Vue 版本，增加了预览前的外部展示，使其开箱即用
• 多样的展示形式：支持文档流、轮播图、自适应瀑布流、嵌套在表格内
• 灵活的数据类型：支持字符串、字符串数组、JSON字符串、对象数组
• 图片源支持URL、Base64、二维码
• 全局或局部引入，参数支持全局或局部配置

安装

npm add pic-viewer viewerjs

// 全局引入

import 'pic-viewer/dist/style.css'
import PicViewer from 'pic-viewer'

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

<!-- 局部引入 -->

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

<script>
import 'pic-viewer/dist/style.css'
import PicViewer from 'pic-viewer'

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

参数

参数名	说明	类型	可接受值	默认值
value	图片源	string, string[], object[]
pattern	展示模式	string	waterfall, swiper, table-cell	undefined（即文档流）
viewerjs	是否启用 viewerjs	boolean		true
viewerjsProps	viewerjs 的参数	object		{ zIndex: 5000, zoomRatio: 0.4 }
srcAt	指定图片源所在的键（如果 value 为对象(数组)类型）	string
swiperProps	swiper 的参数	object		{ observer: true }
qrcode	是否将 value 转换为二维码	boolean, string	true, false, auto	false
qrcodeProps	qrcode 的参数	object		{ margin: 0, errorCorrectionLevel: 'L', width: 444, height: 444 }

qrcode

::: tip
如果将 qrcode 设为 'auto'，pic-viewer 会自动判断是否需要转换（value 为 base64 或 url 时不会转换） :::

配置规则

• 双向绑定参数（v-model / modelValue）仅支持局部配置
• 其余参数均支持全局或局部配置

权重：

• 局部配置高于全局配置
• 对于对象类型的参数，局部配置会与全局配置进行合并，同名属性会被局部配置覆盖

事件

名称	说明	参数
click	点击图片后触发	{ src, index }

插槽

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

<!-- 示例 -->

<PicViewer>
  <template v-slot="{ src, index }">
    <img :src="src" alt="">
    <div>第{{ index + 1 }}张</div>
  </template>
</PicViewer>

方法

名称	说明	参数
preview	手动预览	数组下标，默认值为 0

编程式调用预览

手动调用预览，不再外部展示

<PicViewer :value="" v-show="false" ref="PicViewer"/>
<button @click="()=>{$refs.PicViewer.preview(6)}">preview</button>

二维码清晰度

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

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

<!-- 示例 -->

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

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

获取 swiper 实例

<template>
  <PicViewer pattern="swiper" ref="picViewer" :swiperProps="{
    on: {
      init: onSwiperInit,
    },
  }"/>
</template>

<script>
import 'pic-viewer/dist/style.css'
import PicViewer from 'pic-viewer'

export default {
  components: { PicViewer },
  data () {
    return {
      swiper: null
    }
  },
  methods: {
    onSwiperInit () {
      this.$nextTick(() => {
        this.swiper = this.$refs.picViewer.swiper
      })
    }
  }
}
</script>