mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
26 KiB
JavaScript
2 lines
26 KiB
JavaScript
/*! For license information please see 6689.7ee8d445.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["6689"],{20908:function(n,t,s){"use strict";s.r(t);var e=s("80681");let a=["innerHTML"];t.default={setup:()=>({html:""}),render:()=>((0,e.wg)(),(0,e.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>ImagePreview</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>Used to zoom in and preview the picture, and it supports two methods: function call and component call.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">ImagePreview</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">ImagePreview</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="function-call" tabindex="-1">Function Call</h3>\n<p>Vant provides some utility functions that can quickly evoke global <code>ImagePreview</code> components.</p>\n<p>For example, calling the <code>showImagePreview</code> function will render a Dialog directly in the page.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showImagePreview } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showImagePreview</span>([<span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'</span>]);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<p>When calling <code>showImagePreview</code>, you can directly pass an array of images to display the image preview.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showImagePreview } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showImagePreview</span>([\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'</span>,\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'</span>,\n]);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="set-start-position" tabindex="-1">Set Start Position</h3>\n<p><code>showImagePreview</code> supports passing a configuration object, and you can specify the initial position (index value) of the image through the <code>startPosition</code> option.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showImagePreview } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showImagePreview</span>({\n <span class="hljs-attr">images</span>: [\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'</span>,\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'</span>,\n ],\n <span class="hljs-attr">startPosition</span>: <span class="hljs-number">1</span>,\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="show-close-icon" tabindex="-1">Show Close Icon</h3>\n<p>When the <code>closeable</code> option is enabled, a close icon will be displayed in the top-right corner of the popup layer. You can customize the icon by using the <code>close-icon</code> option, and the icon position can be customized using the <code>close-icon-position</code> option.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showImagePreview } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showImagePreview</span>({\n <span class="hljs-attr">images</span>: [\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'</span>,\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'</span>,\n ],\n <span class="hljs-attr">closeable</span>: <span class="hljs-literal">true</span>,\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="close-event" tabindex="-1">Close Event</h3>\n<p>You can listen to the close event of the image preview through the <code>onClose</code> option.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast, showImagePreview } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showImagePreview</span>({\n <span class="hljs-attr">images</span>: [\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'</span>,\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'</span>,\n ],\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'closed'</span>);\n },\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="before-close" tabindex="-1">Before Close</h3>\n<p>You can pass a callback function through the <code>beforeClose</code> option to perform specific operations before closing the image preview.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showImagePreview } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> instance = <span class="hljs-title function_">showImagePreview</span>({\n <span class="hljs-attr">images</span>: [\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'</span>,\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'</span>,\n ],\n <span class="hljs-attr">beforeClose</span>: <span class="hljs-function">() =></span> <span class="hljs-literal">false</span>,\n});\n\n<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n instance.<span class="hljs-title function_">close</span>();\n}, <span class="hljs-number">2000</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="use-imagepreview-component" tabindex="-1">Use ImagePreview Component</h3>\n<p>If you need to embed components or other custom content inside the ImagePreview, you can directly use the ImagePreview component and customize it using the <code>index</code> slot. Before using it, you need to register the component through <code>app.use</code> or other methods.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image-preview</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"show"</span> <span class="hljs-attr">:images</span>=<span class="hljs-string">"images"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:index</span>></span>Page: {{ index + 1 }}<span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-image-preview</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> show = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> index = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);\n <span class="hljs-keyword">const</span> images = [\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'</span>,\n <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'</span>,\n ];\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onChange</span> = (<span class="hljs-params">newIndex</span>) => {\n index.<span class="hljs-property">value</span> = newIndex;\n };\n\n <span class="hljs-keyword">return</span> {\n show,\n index,\n images,\n onChange,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="use-image-slot" tabindex="-1">Use image slot</h3>\n<p>When using ImagePreview component, you can custom the image through the <code>image</code> slot, such as render a video content. In this example, you can also set <code>close-on-click-image</code> prop to <code>false</code>, so that the preview won\'t be accidentally closed when you click on the video.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image-preview</span>\n <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"show"</span>\n <span class="hljs-attr">:images</span>=<span class="hljs-string">"images"</span>\n <span class="hljs-attr">:close-on-click-image</span>=<span class="hljs-string">"false"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">image</span>=<span class="hljs-string">"{ src }"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%;"</span> <span class="hljs-attr">controls</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">source</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"src"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">video</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-image-preview</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> show = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> images = [\n <span class="hljs-string">'https://www.w3school.com.cn/i/movie.ogg'</span>,\n <span class="hljs-string">'https://www.w3school.com.cn/i/movie.ogg'</span>,\n <span class="hljs-string">'https://www.w3school.com.cn/i/movie.ogg'</span>,\n ];\n <span class="hljs-keyword">return</span> {\n show,\n images,\n };\n },\n};\n</code></pre>\n<p>When you customize the image through the <code>image</code> slot, you can bind the <code>style</code> and <code>onLoad</code> callback through the params of the slot, which can allow the <code><img></code> tag to support image scaling.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image-preview</span>\n <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"show"</span>\n <span class="hljs-attr">:images</span>=<span class="hljs-string">"images"</span>\n <span class="hljs-attr">:close-on-click-image</span>=<span class="hljs-string">"false"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">image</span>=<span class="hljs-string">"{ src, style, onLoad }"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"[{ width: '100%' }, style]"</span> @<span class="hljs-attr">load</span>=<span class="hljs-string">"onLoad"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-image-preview</span>></span>\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="methods" tabindex="-1">Methods</h3>\n<p>Vant exports following ImagePreview utility functions:</p>\n<table>\n<thead>\n<tr>\n<th>Methods</th>\n<th>Description</th>\n<th>Attribute</th>\n<th>Return value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showImagePreview</td>\n<td>Display a full-screen image preview component</td>\n<td><em>string[] | ImagePreviewOptions</em></td>\n<td>ImagePreview Instance</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="imagepreviewoptions" tabindex="-1">ImagePreviewOptions</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>images</td>\n<td>Images URL list</td>\n<td><em>string[]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>startPosition</td>\n<td>Start position</td>\n<td><em>number | string</em></td>\n<td><code>0</code></td>\n</tr>\n<tr>\n<td>showIndex</td>\n<td>Whether to show index</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>showIndicators</td>\n<td>Whether to show indicators</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>loop</td>\n<td>Whether to enable loop</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>swipeDuration</td>\n<td>Animation duration (ms)</td>\n<td><em>number | string</em></td>\n<td><code>300</code></td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Emitted when ImagePreview is closed</td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Emitted when current image changed</td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onScale</td>\n<td>Emitted when scaling current image</td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>closeOnPopstate</td>\n<td>Whether to close when popstate</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>doubleScale <code>v4.7.2</code></td>\n<td>Whether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>closeOnClickImage <code>v4.8.3</code></td>\n<td>Whether to close when image is clicked</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>closeOnClickOverlay <code>v4.6.4</code></td>\n<td>Whether to close when overlay is clicked</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>vertical <code>v4.8.6</code></td>\n<td>Whether to enable vertical gesture sliding</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>beforeClose</td>\n<td>Callback function before close</td>\n<td><em>(action) => boolean | Promise</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom className</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxZoom</td>\n<td>Max zoom</td>\n<td><em>number | string</em></td>\n<td><code>3</code></td>\n</tr>\n<tr>\n<td>minZoom</td>\n<td>Min zoom</td>\n<td><em>number | string</em></td>\n<td><code>1/3</code></td>\n</tr>\n<tr>\n<td>closeable</td>\n<td>Whether to show close icon</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>closeIcon</td>\n<td>Close icon name</td>\n<td><em>string</em></td>\n<td><code>clear</code></td>\n</tr>\n<tr>\n<td>closeIconPosition</td>\n<td>Close icon position, can be set to <code>top-left</code> <code>bottom-left</code> <code>bottom-right</code></td>\n<td><em>string</em></td>\n<td><code>top-right</code></td>\n</tr>\n<tr>\n<td>transition</td>\n<td>Transition, equivalent to <code>name</code> prop of <a href="https://vuejs.org/api/built-in-components.html#transition" target="_blank">transition</a></td>\n<td><em>string</em></td>\n<td><code>van-fade</code></td>\n</tr>\n<tr>\n<td>overlayClass</td>\n<td>Custom overlay class</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlayStyle</td>\n<td>Custom overlay style</td>\n<td><em>object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>teleport</td>\n<td>Specifies a target element where ImagePreview will be mounted</td>\n<td><em>string | Element</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model:show</td>\n<td>Whether to show ImagePreview</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>images</td>\n<td>Images URL list</td>\n<td><em>string[]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>start-position</td>\n<td>Start position</td>\n<td><em>number | string</em></td>\n<td><code>0</code></td>\n</tr>\n<tr>\n<td>swipe-duration</td>\n<td>Animation duration (ms)</td>\n<td><em>number | string</em></td>\n<td><code>300</code></td>\n</tr>\n<tr>\n<td>show-index</td>\n<td>Whether to show index</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>show-indicators</td>\n<td>Whether to show indicators</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>loop</td>\n<td>Whether to enable loop</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>double-scale</td>\n<td>Whether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>before-close</td>\n<td>Callback function before close</td>\n<td><em>(action: number) => boolean | Promise<boolean></em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>close-on-popstate</td>\n<td>Whether to close when popstate</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>close-on-click-image <code>v4.8.3</code></td>\n<td>Whether to close when image is clicked</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>close-on-click-overlay <code>v4.6.4</code></td>\n<td>Whether to close when overlay is clicked</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>vertical <code>v4.8.6</code></td>\n<td>Whether to enable vertical gesture sliding</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>class-name</td>\n<td>Custom className (apply to Popup in image preview)</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>max-zoom</td>\n<td>Max zoom</td>\n<td><em>number | string</em></td>\n<td><code>3</code></td>\n</tr>\n<tr>\n<td>min-zoom</td>\n<td>Min zoom</td>\n<td><em>number | string</em></td>\n<td><code>1/3</code></td>\n</tr>\n<tr>\n<td>closeable</td>\n<td>Whether to show close icon</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>close-icon</td>\n<td>Close icon name</td>\n<td><em>string</em></td>\n<td><code>clear</code></td>\n</tr>\n<tr>\n<td>close-icon-position</td>\n<td>Close icon position, can be set to <code>top-left</code> <code>bottom-left</code> <code>bottom-right</code></td>\n<td><em>string</em></td>\n<td><code>top-right</code></td>\n</tr>\n<tr>\n<td>transition</td>\n<td>Transition, equivalent to <code>name</code> prop of <a href="https://vuejs.org/api/built-in-components.html#transition" target="_blank">transition</a></td>\n<td><em>string</em></td>\n<td><code>van-fade</code></td>\n</tr>\n<tr>\n<td>overlay-class</td>\n<td>Custom overlay class</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlay-style</td>\n<td>Custom overlay style</td>\n<td><em>object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>teleport</td>\n<td>Specifies a target element where ImagePreview will be mounted</td>\n<td><em>string | Element</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Arguments</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>close</td>\n<td>Emitted when closing ImagePreview</td>\n<td><em>{ index: number, url: string }</em></td>\n</tr>\n<tr>\n<td>closed</td>\n<td>Emitted when ImagePreview is closed</td>\n<td>-</td>\n</tr>\n<tr>\n<td>change</td>\n<td>Emitted when current image changed</td>\n<td><em>index: number</em></td>\n</tr>\n<tr>\n<td>scale</td>\n<td>Emitted when scaling current image</td>\n<td><em>{ index: number, scale: number }</em></td>\n</tr>\n<tr>\n<td>long-press</td>\n<td>Emitted when long press current image</td>\n<td><em>{ index: number }</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="methods-1" tabindex="-1">Methods</h3>\n<p>Use <a href="https://vuejs.org/v2/api/#ref" target="_blank">ref</a> to get ImagePreview instance and call instance methods.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Attribute</th>\n<th>Return value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>resetScale <code>4.7.4</code></td>\n<td>Reset the current image\'s zoom ratio</td>\n<td>-</td>\n<td>-</td>\n</tr>\n<tr>\n<td>swipeTo</td>\n<td>Swipe to target index</td>\n<td><em>index: number, options?: SwipeToOptions</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> {\n <span class="hljs-title class_">ImagePreviewProps</span>,\n <span class="hljs-title class_">ImagePreviewOptions</span>,\n <span class="hljs-title class_">ImagePreviewInstance</span>,\n <span class="hljs-title class_">ImagePreviewScaleEventParams</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n<p><code>ImagePreviewInstance</code> is the type of component instance:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">ImagePreviewInstance</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> imagePreviewRef = ref<<span class="hljs-title class_">ImagePreviewInstance</span>>();\n\nimagePreviewRef.<span class="hljs-property">value</span>?.<span class="hljs-title function_">swipeTo</span>(<span class="hljs-number">1</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>SlotProps</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>index</td>\n<td>Custom index</td>\n<td><em>{ index: index of current image }</em></td>\n</tr>\n<tr>\n<td>cover</td>\n<td>Custom content that covers the image preview</td>\n<td>-</td>\n</tr>\n<tr>\n<td>image</td>\n<td>Custom image content</td>\n<td><em>{ src: current image src, onLoad: load image, style: current image style }</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="onclose-parameters" tabindex="-1">onClose Parameters</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>URL of current image</td>\n<td><em>number</em></td>\n</tr>\n<tr>\n<td>index</td>\n<td>Index of current image</td>\n<td><em>number</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="onscale-parameters" tabindex="-1">onScale Parameters</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>index</td>\n<td>Index of current image</td>\n<td><em>number</em></td>\n</tr>\n<tr>\n<td>scale</td>\n<td>scale of current image</td>\n<td><em>number</em></td>\n</tr>\n</tbody>\n</table>\n</div><h2 id="theming" tabindex="-1">Theming</h2>\n<div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-image-preview-index-text-color</td>\n<td><em>var(--van-white)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-index-font-size</td>\n<td><em>var(--van-font-size-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-index-line-height</td>\n<td><em>var(--van-line-height-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-index-text-shadow</td>\n<td><em>0 1px 1px var(--van-gray-8)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-overlay-background</td>\n<td><em>rgba(0, 0, 0, 0.9)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-close-icon-size</td>\n<td><em>22px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-close-icon-color</td>\n<td><em>var(--van-gray-5)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-close-icon-margin</td>\n<td><em>var(--van-padding-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-image-preview-close-icon-z-index</td>\n<td><em>1</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,a))}}}]); |