@ks-web/image-preview

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