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