ImagePreview 图片预览

介绍

一屏展示图片，可放大预览。

函数调用

为了便于使用 ImagePreview，提供了 showImagePreview函数，便于调用 ImagePreview，可设置标识指定一个 ImagePreview 组件调用。

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 ImagePreview 组件，且函数调用方法需要在 onLoad 生命周期后调用。

<vd-image-preview name="page" />

import { showImagePreview } from 'vital-design';

// 配置同组件 props
showImagePreview({
  name: 'page',
  images: [...],
  active: 2,
});

基础用法

通过 v-model 来设置是否展示，通过 images 属性来设置图片列表。

<vd-image-preview v-model="state.show" :images="state.images" />

const state = reactive({
  show: false,
  images: [...],
});

激活位置

通过 active-index 属性来设置激活图片索引。

<vd-image-preview
  v-model="state.show"
  :active="state.active"
  :images="state.images"
/>

const state = reactive({
  show: false,
  images: [...],
  active: 2,
});

展示关闭按钮

通过 closeable 属性来展示关闭按钮。

<vd-image-preview
  v-model="state.show"
  :images="state.images"
  closeable
/>

const state = reactive({
  show: false,
  images: [...],
});

使用页码插槽

通过 index 插槽来自定义页码。

<vd-image-preview
  v-model="state.show"
  :images="state.images"
>
  <template #index="{ active, total }">
    第 {{ active + 1 }} 页
  </template>
</vd-image-preview>

const state = reactive({
  show: false,
  images: [...],
});

使用视图插槽

通过 view 插槽来自定义视图内容，可使用图片、视频或其他自定义内容。

<vd-image-preview
  v-model="state.show"
  :images="state.images"
>
  <template #view="{ src, index }">
    <video :poster="src" style="width:100%;"></video>
  </template>
</vd-image-preview>

const state = reactive({
  show: false,
  images: [...],
});

API

Props

参数	说明	类型	默认值
name	标识名称	string	-
show	是否展示	boolean	false
images	图片列表	string[]	-
active	激活索引	number	0
zoomable	是否允许缩放	boolean	true
min-zoom	最小缩放比例	number | string	0.3
max-zoom	最大缩放比例	number | string	5
show-index	是否显示页码	boolean	true
closeable	是否展示关闭按钮	boolean	false
close-icon	关闭按钮图标	IconsName	'round-close-fill'
close-icon-size	关闭按钮图标大小	number | string	24
close-on-click	点击时关闭	boolean	true
close-on-click-view	点击视图时关闭，优先级高于 closeOnClick	boolean	true
show-menu-by-longpress	开启长按图片显示识别小程序码菜单	boolean	false
z-index	层级	string | number	2001+

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-close	点击关闭按钮时触发	MouseEvent
click-view	点击视图时触发	ImagePreviewOnClickViewEvent
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Slots

名称	说明
view	预览视图
cover	预览覆盖
index	页码
close	关闭按钮

Expose

方法名	说明	参数	返回值
open	打开预览	ImagePreviewOpenOption	-
close	关闭预览	-	-