pic-viewer

pic-viewer

图片画廊。

特性

• viewerjs + swiper + qrcode 组合拳
• 多样的展示形式: 支持文档流、轮播图、自适应瀑布流、嵌套在表格内（兼容 el-table）
• 灵活的数据类型: 支持 string、JSON string、string[]、object[]
• 图片源支持 URL、Base64、二维码
• 全局或局部引入，参数支持全局或局部配置（vue-global-config 提供技术支持）

安装

外置依赖

• vue@2

局部引入

npm add pic-viewer

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

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

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

全局引入

npm add pic-viewer

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

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

参数

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

qrcode

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

事件

名称	说明	参数
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
    ref="picViewer" pattern="swiper" :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>

更新日志

各版本详细改动请参考 release notes 。