ImagePreview 图片预览

AuImagePreview 是从桌面编辑器场景抽离出的通用查看器，支持多图切换、滚轮与双指缩放、放大后拖拽、旋转、键盘控制、焦点恢复和滚动锁定。图片项既可传 URL 字符串，也可传 { src, alt, title } 对象。

基础用法

多图预览

点击缩略图打开；方向键切图，+ / - 缩放，0 还原，Escape 关闭。

vue

<template>
  <div class="image-preview-demo">
    <button
      v-for="(image, index) in images"
      :key="image.title"
      class="image-preview-demo__thumbnail au-focus-ring"
      type="button"
      @click="showPreview(index)"
    >
      <img :src="image.src" :alt="image.alt" />
      <span>{{ image.title }}</span>
    </button>
  </div>
  <AuImagePreview
    v-if="visible"
    v-model="visible"
    :images="images"
    :initial-index="initialIndex"
  />
</template>
<script setup>
import { ref } from 'vue';
import { AuImagePreview } from 'aurora-plus';
const visible = ref(false);
const initialIndex = ref(0);
const images = [
  createDemoImage('湖蓝', '#3478f6', '#dbe8ff'),
  createDemoImage('松绿', '#2f9e72', '#d9f2e8'),
  createDemoImage('暖橙', '#d98a24', '#f9ead3'),
];
function createDemoImage(title, color, background) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="600" viewBox="0 0 960 600"><rect width="960" height="600" rx="32" fill="${background}"/><circle cx="480" cy="270" r="150" fill="${color}"/><text x="480" y="500" text-anchor="middle" font-family="system-ui" font-size="48" fill="${color}">${title}</text></svg>`;
  return {
    src: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`,
    alt: `${title}示例图`,
    title,
  };
}
function showPreview(index) {
  initialIndex.value = index;
  visible.value = true;
}
</script>
<style scoped>
.image-preview-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.image-preview-demo__thumbnail {
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  color: var(--au-color-text-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--au-font-size-small);
  cursor: zoom-in;
}
.image-preview-demo__thumbnail img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  border: 1px solid var(--au-material-border);
  border-radius: var(--au-radius-control);
  object-fit: cover;
}
</style>

Attributes

属性	说明	默认值
v-model	显示状态；组件直接挂载时默认显示	true
images / urlList	图片对象或 URL 列表；images 优先	[]
initialIndex / infinite	初始索引 / 循环切换	0 / true
initialScale	打开和切图后的缩放	1
zoomRate / minScale / maxScale	缩放倍率与范围	1.2 / 0.2 / 5
rotateStep	单次旋转角度	90
fit	图片适配方式，同 object-fit	contain
wheelZoom	滚轮缩放	true
hideOnClickModal	点击图片之外的舞台关闭	false
closeOnPressEscape / lockScroll	Escape 关闭 / 锁定页面滚动	true
showToolbar / showProgress	工具条 / 图片序号	true
teleported / appendTo	是否传送及目标	true / body
topOffset	顶部保留空间，桌面自定义标题栏可传 40	0
zIndex / ariaLabel	层级 / 无障碍名称	10000 / 图片预览

Events、Slots 与 Exposes

事件包括 open、opened、close(reason)、closed、switch(index, image)、zoom(scale, source)、rotate(degree, direction)、load、error 和 update:modelValue。

插槽包括 toolbar、progress、error 和 empty。组件暴露 open()、close()、setActiveItem(index)、showPrevious()、showNext()、zoomIn()、zoomOut()、setScale()、rotateLeft()、rotateRight()、resetTransform()、activeIndex、scale 与 viewerRef。