pic-viewer

pic-viewer / 图片预览

Features

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

Installation

Dependencies：vue

// 全局引入

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

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

<!-- 局部引入 -->

<template>
  <PicViewer v-bind="config"/>
</template>

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

export default {
  components: { PicViewer },
  data () {
    return {
      config: {
        // 局部配置
      }
    }
  }
}
</script>

Props

Attribute	Description	Type	Options	Default
value	img link(s)	string / array[string] / array[object]
pattern	display pattern	string	'waterfall', 'swiper', 'table-cell'	undefined, means normal flow
objectKey	if type of value is array[object], you need to specify the img key of object	string
swiperProps*	props of swiper	object
qrcode*	turning value into qrcode	boolean, string	true, false, 'auto'	false
qrcodeProps*	props of qrcode dependency	object

qrcode

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

qrcodeProps

// 默认值

{
  margin: 0,
  scale: 400,
  errorCorrectionLevel: 'L',
  width: 148,
  height: 148,
}

swiperProps

// 默认值

{
  observer: true,
}

Methods

Method	Description	Parameters
preview	preview manually	index of value array (default: 0)

Use Cases

Preview manually, no external display

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