Have ideas to improve npm?Join in the discussion! »

pic-viewer

0.2.12 • Public • Published

pic-viewer / 图片预览

before preview


previewing

Features

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

Installation

NPM

$ 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)

Install

npm i pic-viewer

DownloadsWeekly Downloads

45

Version

0.2.12

License

MIT

Unpacked Size

1.69 MB

Total Files

11

Last publish

Collaborators

  • avatar