pic-viewer

pic-viewer / 图片预览

Features

• √ viewerjs的vue版本 增加了预览前的外部展示 使其开箱即用
• √ 支持自适应瀑布流展示、嵌套在表格内展示
• √ 灵活的数据类型：支持字符串/字符串数组/对象数组
• √ 友好的hover交互
• √ 全局安装/单独引入 通用参数支持全局配置

Installation

$ yarn add pic-viewer

Dependencies：vue

import PicViewer from 'pic-viewer'

// 组件内引入
components: { PicViewer }

// 全局引入
Vue.use(PicViewer)

Quick Start

Waterfall Layout:

<PicViewer :value=""/>

Normal Flow Layout:

Typically used in tables

Here's an example for element-ui:

<el-table>
  <el-table-column>
    <template slot-scope="{ row }">
      <PicViewer :waterfall="false" :value="row.img"/>
    </template>
  </el-table-column>
</el-table>

Preview manually, no external display:

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

Attribute	Description	Type	Options	Default
value	img link[s]	string / array[string] / array[object]
objectKey	if type of value is array[object], you need to specify the img key of object	string
waterfall	whether using waterfall layout	boolean		true

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