ImagePreview 图片预览

介绍

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

函数调用

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

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 ImagePreview 组件。

<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: [...],
});

图片标题

images 项可为 { src, title }，标题随当前图片切换；也可用 title 插槽自定义。

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

const state = reactive({
  show: false,
  images: [
    { src: '...', title: '风景一' },
    { src: '...', title: '风景二' },
  ],
});

使用页码插槽

通过 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	-
v-model	是否展示	boolean	false
images	图片列表，项可为地址或 { src, title }	ImagePreviewImage[]	[]
active	激活索引	number	-
zoomable	是否允许缩放	boolean	true
min-zoom	最小缩放比例	number | string	0.3
max-zoom	最大缩放比例	number | string	5
wheel-zoom	滚轮单次缩放步进	number | string	0.1
rotatable	是否允许双指旋转	boolean	true
show-index	是否显示页码	boolean	true
closeable	是否展示关闭按钮	boolean	false
close-icon	关闭按钮图标	IconsName	'round-close-fill'
close-icon-size	关闭按钮图标大小	number | string	20
close-on-click	点击时关闭	boolean	true
close-on-click-view	点击视图时关闭，优先级高于 closeOnClick	boolean	true
show-menu-by-longpress	开启长按图片显示识别小程序码菜单	boolean	false
lock-scroll	是否锁定背景滚动	boolean	true
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
update:model-value	展示状态更新时触发	boolean
update:active	激活索引更新时触发	number
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Slots

名称	说明
view	预览视图，参数含 src title item index active
cover	预览覆盖，参数同 view
title	当前图片标题，参数含 title src item active total
index	页码
close	关闭按钮

Expose

方法名 / 属性名	说明	参数	返回值
open	打开预览	ImagePreviewOpenOption	-
close	关闭预览	-	-
swiperRef	内部轮播实例	-	ShallowRef<SwiperInstance | undefined>

类型定义

组件导出以下类型定义：

import type {
  ImagePreviewImage,
  ImagePreviewItem,
  ImagePreviewOpenOption,
  ImagePreviewOnClickViewEvent,
  ImagePreviewExpose,
  ImagePreviewInstance,
} from 'vital-design';