ImagePreview 图片预览

引入

ImagePreview和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式。使用前需要先引入它。

  1. import{ImagePreview}from'vant';
  2. Vue.use(ImagePreview);

代码演示

基础用法

直接传入图片数组,即可展示图片预览

  1. ImagePreview([
  2. 'https://img.yzcdn.cn/1.jpg',
  3. 'https://img.yzcdn.cn/2.jpg'
  4. ]);

传入配置项

通过传入配置对象,可以指定初始图片的位置、监听关闭事件

  1. ImagePreview({
  2. images:[
  3. 'https://img.yzcdn.cn/1.jpg',
  4. 'https://img.yzcdn.cn/2.jpg'
  5. ],
  6. startPosition:1,
  7. onClose(){
  8. // do something
  9. }
  10. });

异步关闭

通过asyncClose属性可以开启异步关闭,开启后异步关闭后,只能通过实例上的 close 方法关闭图片预览

  1. const instance =ImagePreview({
  2. images:[
  3. 'https://img.yzcdn.cn/1.jpg',
  4. 'https://img.yzcdn.cn/2.jpg'
  5. ],
  6. asyncClose:true
  7. });
  8. setTimeout(()=>{
  9. instance.close();
  10. },1000);

组件调用

如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 Vue.use 注册组件

  1. <van-image-preview
  2. v-model="show"
  3. :images="images"
  4. @change="onChange"
  5. >
  6. <templatev-slot:index>第{ index }页</template>
  7. </van-image-preview>
  1. exportdefault{
  2. data(){
  3. return{
  4. show:false,
  5. index:0,
  6. images:[
  7. 'https://img.yzcdn.cn/1.jpg',
  8. 'https://img.yzcdn.cn/2.jpg'
  9. ]
  10. };
  11. },
  12. methods:{
  13. onChange(index){
  14. this.index = index;
  15. }
  16. }
  17. }

API

Options

通过函数调用 ImagePreview 时,支持传入以下选项:

参数名说明类型默认值版本
images需要预览的图片 URL 数组Array[]1.1.16
startPosition图片预览起始位置索引Number01.1.16
showIndex是否显示页码Booleantrue1.3.4
showIndicators是否显示轮播指示器Booleanfalse1.3.10
loop是否开启循环播放Booleantrue1.4.4
onClose关闭时的回调函数Function-1.1.16
asyncClose是否开启异步关闭Booleanfalse1.4.8
closeOnPopstate是否在页面回退时自动关闭Booleanfalse2.0.0
className自定义类名String | Array | Object-1.5.2
lazyLoad是否开启图片懒加载,须配合 Lazyload 组件使用Booleanfalse1.5.3
maxZoom手势缩放时,最大缩放比例Number31.6.14
minZoom手势缩放时,最小缩放比例Number1/31.6.14

Props

通过组件调用 ImagePreview 时,支持以下 Props:

参数说明类型默认值版本
images需要预览的图片 URL 数组Array[]1.1.16
start-position图片预览起始位置索引Number01.1.16
show-index是否显示页码Booleantrue1.3.4
show-indicators是否显示轮播指示器Booleanfalse1.3.10
loop是否开启循环播放Booleantrue1.4.4
async-close是否开启异步关闭Booleanfalse1.4.8
close-on-popstate是否在页面回退时自动关闭Booleanfalse
class-name自定义类名String | Array | Object-1.5.2
lazy-load是否开启图片懒加载,须配合 Lazyload 组件使用Booleanfalse1.5.3
max-zoom手势缩放时,最大缩放比例Number31.6.14
min-zoom手势缩放时,最小缩放比例Number1/31.6.14

Events

通过组件调用 ImagePreview 时,支持以下事件:

事件说明回调参数
close关闭时触发{ index: 索引, url: 图片链接 }
change切换当前图片时触发index, 当前图片的索引

Slots

通过组件调用 ImagePreview 时,支持以下插槽:

名称说明
index自定义页码内容

onClose 回调参数

参数名说明类型
url当前图片 URLString
index当前图片的索引值Number

ImagePreview 图片预览 - 图1