ImageViewer 图片预览

ImageViewer 图片预览 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { createImageViewer } from "@/components/pro/image-viewer";

const open = () => createImageViewer({ urlList: ["/notData.png"] });
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="open">预览图片</el-button>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { ImageViewer, createImageViewer } from "@/components/pro/image-viewer";

Props

参数	说明	类型	默认值	必填
urlList	用于预览的图片链接列表	string[]	(): string[] => []	否
zIndex	预览时遮罩层的 z-index	number	2000	否
initialIndex	初始预览图像索引，小于 url-list 的长度	number	0	否
infinite	是否可以无限循环预览	boolean	true	否
hideOnClickModal	是否可以通过点击遮罩层关闭预览	boolean	false	否
teleported	image 自身是否插入至 body 元素上	boolean	false	否
modelValue	组件双向绑定值。	boolean	false	否

Events

事件名	说明	回调参数
update:modelValue	双向绑定值更新时触发。	value: unknown

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
close	关闭组件。	-

Module API

名称	说明	类型
createImageViewer	导出 createImageViewer 供业务侧复用。	(options: Partial<ImageViewerProps>) => unknown

Types

ImageViewerProps

导出 ImageViewerProps 供业务侧复用。

字段	说明	类型	默认值	必填
urlList	用于预览的图片链接列表	string[]	-	否
zIndex	预览时遮罩层的 z-index	number	-	否
initialIndex	初始预览图像索引，小于 url-list 的长度	number	0	否
infinite	是否可以无限循环预览	boolean	true	否
hideOnClickModal	是否可以通过点击遮罩层关闭预览	boolean	false	否
teleported	image 自身是否插入至 body 元素上	boolean	false	否
modelValue	组件双向绑定值。	boolean	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。