vant/src/image-preview

ImagePreview

Install

import Vue from 'vue';
import { ImagePreview } from 'vant';

Vue.use(ImagePreview);

Usage

Basic Usage

ImagePreview([
  'https://img.yzcdn.cn/vant/apple-1.jpg',
  'https://img.yzcdn.cn/vant/apple-2.jpg'
]);

Custom config

ImagePreview({
  images: [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg'
  ],
  startPosition: 1,
  onClose() {
    // do something
  }
});

Async Close

const instance = ImagePreview({
  images: [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg'
  ],
  asyncClose: true
});

setTimeout(() => {
  instance.close();
}, 1000);

Component Call

<van-image-preview
  v-model="show"
  :images="images"
  @change="onChange"
>
  <template v-slot:index>Page: {{ index }}</template>
</van-image-preview>

export default {
  data() {
    return {
      show: false,
      index: 0,
      images: [
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    };
  },

  methods: {
    onChange(index) {
      this.index = index;
    }
  }
}

API

Options

Attribute	Description	Type	Default	Version
images	Images URL list	string[]	[]	-
startPosition	Start position	number	0	-
showIndex	Whether to show index	boolean	true	-
showIndicators	Whether to show indicators	boolean	false	-
loop	Whether to enable loop	boolean	true	-
swipeDuration	Animation duration (ms)	number	500	-
onClose	Triggered when close	Function	-	-
onChange	Triggered when current image change	Function	-	2.0.3
closeOnPopstate	Whether to close when popstate	boolean	false	-
asyncClose	Whether to enable async close	boolean	false	-
className	Custom className	any	-	-
lazyLoad	Whether to enable thumb lazy load，should register Lazyload component	boolean	false	-
maxZoom	Max zoom	number	3	-
minZoom	Min zoom	number	1/3	-

Props

Attribute	Description	Type	Default	Version
images	Images URL list	string[]	[]	-
start-position	Start position	number	0	-
show-index	Whether to show index	boolean	true	-
show-indicators	Whether to show indicators	boolean	false	-
loop	Whether to enable loop	boolean	true	-
swipe-duration	Animation duration (ms)	number	500	-
async-close	Whether to enable async close	boolean	false	-
close-on-popstate	Whether to close when popstate	boolean	false	-
class-name	Custom className	any	-	-
lazy-load	Whether to enable thumb lazy load，should register Lazyload component	boolean	false	-
max-zoom	Max zoom	number	3	-
min-zoom	Min zoom	number	1/3	-

Events

Event	Description	Parameters
close	Triggered when close	{ index, url }
change	Triggered when current image change	index: index of current image

Slots

Name	Description
index	Custom index
cover	Custom content that covers the image preview

onClose Parematers

Attribute	Description	Type
url	Url of current image	number
index	Index of current image	string