vue-easy-imagepreview

手机端图片预览 vue 组件

功能：

- 图片方大缩小
- 循环滑动

安装

``
npm install -S vue-easy-imagepreview
`

使用

$3

`
import ImagePreview from 'vue-easy-imagepreview'

//ImagePreview.show(options | [])

ImagePreview.show([
'https://img01.yzcdn.cn/vant/apple-1.jpg',
'https://img01.yzcdn.cn/vant/apple-2.jpg'
])
或者
ImagePreview.show({
images: [
'https://img01.yzcdn.cn/vant/apple-1.jpg',
'https://img01.yzcdn.cn/vant/apple-2.jpg'
]
})
`

$3

`
//在vue组件中使用

import ImagePreview from 'vue-easy-imagepreview'


`

$3

`
import ImagePreview from 'vue-easy-imagepreview'

Vue.use(ImagePreview)

//组件中使用
this.$preview(options | [])
``

Options

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ---------------- | ----------------------- | ---------- | ------ |
| images | 要预览的图片地址 | array | -- | [ ] |
| close | 关闭时的回调 | function: ()=>{} | -- | -- |
| change | 图片切换时的回调 | function: (index) => {} | -- | -- |
| loop | 是否循环滑动 | boolean | true/false | true |
| showIndex | 是否显示指示器 | boolean | true/false | true |
| maxZoom | 最大放大倍数 | number | -- | 3 |
| minZoom | 最小缩小倍数 | number | -- | 0.5 |
| index | 从第几个开始显示 | number | -- | 1 |

slot

| 名称 | 说明 |
| ------------------ | ------------------------ |
| placeholderLoading | 图片加载中时的显示视图 |
| placeholderFail | 图片加载失败时的显示视图 |
| index | 指示器视图 |

Event

| 名称 | 说明 | 回调参数 |
| ------ | ---------------- | -------- |
| close | 关闭时的回调 | -- |
| change | 图片切换时的回调 | index |