1.0.1 • Published 12 months ago
@ks-web/image-preview v1.0.1
image-preview
安装
npm install @ks-web/image-preview使用
Vue.use(imagePreview)
// 组件方式调用
<image-preview v-model="dialogShow"
:index.sync="dialogIndex"
:images="images"></image-preview>
// api方式调用
this.$dialogImagePreview({
index: 0,
images: [...images],
onClose () {
console.log('关闭')
},
onChange () {
console.log('滑动')
}
})Props
| 名称 | 说明 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| index | 图片下标 | number | Y | 0 |
| lazyImage | 图片懒加载 | boolean | N | false |
| clickOnceClose | 点击任意区域一次关闭弹窗 | boolean | N | false |
| imageSwiper | 是否需要图片指示器，与clickOnceClose互斥 | boolean | N | true |
| lazySwiper | 图片指示器虚拟滚动 | boolean | N | false |
| images | 图片列表 | array | Y | [] |
| swiperImages | 图片指示器列表，如没有图片则取images中的对应图片 | array | N | [] |
| closeOnlyDialog | 使用物理返回键时,是否只关闭图片查看器弹窗,而不改变路由 | boolean | N | true |
option(api方式调用)
| 名称 | 说明 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| index | 图片下标 | number | Y | 0 |
| images | 图片列表 | array | Y | [] |
| onClose | 关闭时的回调 | function | N | undefined |
| onChange | 切换时的回调 | function | N | undefined |
文档链接
https://doc.ky-tech.com.cn/docs/b1764a82be0c4992b5a2da1fc45ade58