vue-easy-imagepreview
v0.1.2
Published
vue imagepreview
Downloads
11
Maintainers
Readme
vue-easy-imagepreview
手机端图片预览 vue 组件
功能:
- 图片方大缩小
- 循环滑动
安装
npm install -S vue-easy-imagepreview
使用
函数形式
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'
]
})
组件形式
//在vue组件中使用
import ImagePreview from 'vue-easy-imagepreview'
<image-preview :images="images"></image-preview>
Vue 插件形式
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 |