jk's notes

ImagePreview 图片预览

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/image-preview

该组件的作用是全屏展示图片, 并允许切换显示.

该组件有两种用法: 函数式调用, 以及组件式用法.

showImagePreview([
  // 图片地址
])

常用配置选项

showImagePreview({
  images: [ /* 图片 */ ],
  ... // 其他配置
})

可用配置:

  • startPosition 配置初始图片.
  • closeable 展示关闭按钮.
  • onClose 函数, 监视关闭行为.
  • 可以使用 beforeClose: () => false, 禁用自动关闭, 然后利用实例的 close() 方法关闭. showImagePreview() 返回实例引用.

组件用法, 利用插槽自定义显示, 利用 v-model:show 控制显示. images 属性绑定图片 (url 数组). change 事件监视切换行为.

Last Updated:
Contributors: jk