vant/src/image-preview

ImagePreview

Install

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

Vue.use(ImagePreview);

Usage

Basic Usage

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

Set Start Position

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

Show Close Icon

After setting the closeable attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the close-icon attribute, and the icon location can be customized by using the close-icon-position attribute.

ImagePreview({
  images: [
    'https://img01.yzcdn.cn/vant/apple-1.jpg',
    'https://img01.yzcdn.cn/vant/apple-2.jpg',
  ],
  closeable: true,
});

Close Event

import { Toast } from 'vant';

ImagePreview({
  images: [
    'https://img01.yzcdn.cn/vant/apple-1.jpg',
    'https://img01.yzcdn.cn/vant/apple-2.jpg',
  ],
  onClose() {
    Toast('closed');
  },
});

Async Close

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

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

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://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
  methods: {
    onChange(index) {
      this.index = index;
    },
  },
};

API

Options

Attribute	Description	Type	Default
images	Images URL list	string[]	[]
startPosition	Start position	number | string	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 | string	300
onClose	Emitted when ImagePreview is closed	Function	-
onChange	Emitted when current image changed	Function	-
onScale	Emitted when scaling current image	Function	-
closeOnPopstate	Whether to close when popstate	boolean	true
asyncClose	Whether to enable async close	boolean	false
className	Custom className	any	-
maxZoom	Max zoom	number | string	3
minZoom	Min zoom	number | string	1/3
closeable v2.5.0	Whether to show close icon	boolean	false
closeIcon v2.5.0	Close icon name	string	clear
closeIconPosition v2.5.0	Close icon position，can be set to top-left bottom-left bottom-right	string	top-right
transition v2.12.8	Transition, equivalent to name prop of transition	string	van-fade
overlayStyle v2.12.37	Custom overlay style	object	-
getContainer	Return the mount node for ImagePreview	string | () => Element	-

Props

Attribute	Description	Type	Default
images	Images URL list	string[]	[]
start-position	Start position	number | string	0
swipe-duration	Animation duration (ms)	number | string	300
show-index	Whether to show index	boolean	true
show-indicators	Whether to show indicators	boolean	false
loop	Whether to enable loop	boolean	true
async-close	Whether to enable async close	boolean	false
close-on-popstate	Whether to close when popstate	boolean	true
class-name	Custom className	any	-
max-zoom	Max zoom	number | string	3
min-zoom	Min zoom	number | string	1/3
closeable v2.5.0	Whether to show close icon	boolean	false
close-icon v2.5.0	Close icon name	string	clear
close-icon-position v2.5.0	Close icon position，can be set to top-left bottom-left bottom-right	string	top-right
transition v2.12.8	Transition, equivalent to name prop of transition	string	van-fade
overlay-style v2.12.37	Custom overlay style	object	-
get-container	Return the mount node for ImagePreview	string | () => Element	-

Events

Event	Description	Parameters
close	Emitted when closing ImagePreview	{ index, url }
closed v2.5.6	Emitted when ImagePreview is closed	-
change	Emitted when current image changed	index: index of current image
scale v2.5.0	Emitted when scaling current image	{ index: index of current image, scale: scale of current image}

Methods

Use ref to get ImagePreview instance and call instance methods.

Name	Description	Attribute	Return value
swipeTo 2.9.0	Swipe to target index	index: target index, options: Options	-

Slots

Name	Description	SlotProps
index	Custom index	{ index: index of current image }
cover	Custom content that covers the image preview	-

onClose Parameters

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

onScale Parameters

Attribute	Description	Type
index	Index of current image	number
scale	scale of current image	number

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@image-preview-index-text-color	@white	-
@image-preview-index-font-size	@font-size-md	-
@image-preview-index-line-height	@line-height-md	-
@image-preview-index-text-shadow	0 1px 1px @gray-8	-
@image-preview-overlay-background-color	rgba(0, 0, 0, 0.9)	-
@image-preview-close-icon-size	22px	-
@image-preview-close-icon-color	@gray-5	-
@image-preview-close-icon-active-color	@gray-6	-
@image-preview-close-icon-margin	@padding-md	-
@image-preview-close-icon-z-index	1	-