import{o as s,a as e,y as a}from"./vue-libs.b44bc779.js";const n={class:"van-doc-markdown-body"},d=a(`

ImagePreview

Intro

Used to zoom in and preview the picture, and it supports two methods: function call and component call.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

const app = createApp();
app.use(ImagePreview);

Usage

Basic Usage

ImagePreview([
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);

Set Start Position

ImagePreview({
  images: [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ],
  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://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ],
  closeable: true,
});

Close Event

import { Toast } from 'vant';

ImagePreview({
  images: [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ],
  onClose() {
    Toast('closed');
  },
});

Before Close

const instance = ImagePreview({
  images: [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ],
  beforeClose: () => false,
});

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

Component Call

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

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const index = ref(0);
    const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
    const onChange = (newIndex) => {
      index.value = newIndex;
    };

    return {
      show,
      index,
      images,
      onChange,
    };
  },
};

Use image slot

When using ImagePreview component, you can custom the image through the image slot, such as render a video content.

<van-image-preview v-model:show="show" :images="images">
  <template #image="{ src }">
    <video style="width: 100%;" controls>
      <source :src="src" />
    </video>
  </template>
</van-image-preview>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const images = [
      'https://www.w3school.com.cn/i/movie.ogg',
      'https://www.w3school.com.cn/i/movie.ogg',
      'https://www.w3school.com.cn/i/movie.ogg',
    ];
    return {
      show,
      images,
    };
  },
};

API

Options

AttributeDescriptionTypeDefault
imagesImages URL liststring[][]
startPositionStart positionnumber | string0
showIndexWhether to show indexbooleantrue
showIndicatorsWhether to show indicatorsbooleanfalse
loopWhether to enable loopbooleantrue
swipeDurationAnimation duration (ms)number | string300
onCloseEmitted when ImagePreview is closedFunction-
onChangeEmitted when current image changedFunction-
onScaleEmitted when scaling current imageFunction-
closeOnPopstateWhether to close when popstatebooleantrue
beforeCloseCallback function before close(action) => boolean | Promise-
classNameCustom classNamestring | Array | object-
maxZoomMax zoomnumber | string3
minZoomMin zoomnumber | string1/3
closeableWhether to show close iconbooleanfalse
closeIconClose icon namestringclear
closeIconPositionClose icon position, can be set to top-left bottom-left bottom-rightstringtop-right
transition v3.0.8Transition, equivalent to name prop of transitionstringvan-fade
overlayClass v3.2.8Custom overlay classstring | Array | object-
overlayStyle v3.0.8Custom overlay styleobject-
teleportSpecifies a target element where ImagePreview will be mountedstring | Element-

Props

AttributeDescriptionTypeDefault
v-model:showWhether to show ImagePreviewbooleanfalse
imagesImages URL liststring[][]
start-positionStart positionnumber | string0
swipe-durationAnimation duration (ms)number | string300
show-indexWhether to show indexbooleantrue
show-indicatorsWhether to show indicatorsbooleanfalse
loopWhether to enable loopbooleantrue
before-closeCallback function before close(action: number) => boolean | Promise<boolean>-
close-on-popstateWhether to close when popstatebooleantrue
class-nameCustom classNamestring | Array | object-
max-zoomMax zoomnumber | string3
min-zoomMin zoomnumber | string1/3
closeableWhether to show close iconbooleanfalse
close-iconClose icon namestringclear
close-icon-positionClose icon position, can be set to top-left bottom-left bottom-rightstringtop-right
transition v3.0.8Transition, equivalent to name prop of transitionstringvan-fade
overlay-class v3.2.8Custom overlay classstring | Array | object-
overlay-style v3.0.8Custom overlay styleobject-
teleportSpecifies a target element where ImagePreview will be mountedstring | Element-

Events

EventDescriptionArguments
closeEmitted when closing ImagePreviewvalue: { index, url }
closedEmitted when ImagePreview is closed-
changeEmitted when current image changedindex: number
scaleEmitted when scaling current imagevalue: ImagePreviewScaleEventParams
scaleEmitted when scaling current imagevalue: ImagePreviewScaleEventParams

Methods

Use ref to get ImagePreview instance and call instance methods.

NameDescriptionAttributeReturn value
swipeTo 2.9.0Swipe to target indexindex: number, options?: SwipeToOptions-

Types

The component exports the following type definitions:

import type {
  ImagePreviewProps,
  ImagePreviewOptions,
  ImagePreviewInstance,
  ImagePreviewScaleEventParams,
} from 'vant';

ImagePreviewInstance is the type of component instance:

import { ref } from 'vue';
import type { ImagePreviewInstance } from 'vant';

const imagePreviewRef = ref<ImagePreviewInstance>();

imagePreviewRef.value?.swipeTo(1);

Slots

NameDescriptionSlotProps
indexCustom index{ index: index of current image }
coverCustom content that covers the image preview-
image v3.6.5Custom image content{ src: current image src }

onClose Parameters

AttributeDescriptionType
urlURL of current imagenumber
indexIndex of current imagenumber

onScale Parameters

AttributeDescriptionType
indexIndex of current imagenumber
scalescale of current imagenumber

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

NameDefault ValueDescription
--van-image-preview-index-text-colorvar(--van-white)-
--van-image-preview-index-font-sizevar(--van-font-size-md)-
--van-image-preview-index-line-heightvar(--van-line-height-md)-
--van-image-preview-index-text-shadow0 1px 1px var(--van-gray-8)-
--van-image-preview-overlay-background-colorrgba(0, 0, 0, 0.9)-
--van-image-preview-close-icon-size22px-
--van-image-preview-close-icon-colorvar(--van-gray-5)-
--van-image-preview-close-icon-marginvar(--van-padding-md)-
--van-image-preview-close-icon-z-index1-
`,22),o=[d],h={__name:"README",setup(l,{expose:t}){return t({frontmatter:{}}),(c,p)=>(s(),e("div",n,o))}};export{h as default};