ImgViewer

图片缩略图展示组件,支持单张或数组形式的图片源。通过默认插槽叠加删除按钮、自定义点击区等操作层。

浮窗放大请使用 Previewer

旧版 ImgViewerZoom 已在 0.6.0 移除(连带卸载 viewerjs / v-viewer)。全屏 / 浮窗式放大请改用 preview.show()——可拖动、无遮罩、不阻塞背景交互。

Anatomy

• ImgViewer图片容器,负责加载与布局,接受 string | File | 数组
  • ImgViewerDeletehover 显示的删除按钮覆盖层,点击事件由外部处理

基本用法

显示单张图片

<script setup lang="ts">
import { ImgViewer } from '@tripo3d/design';
</script>

<template>
  <ImgViewer src="https://picsum.photos/400/300" />
</template>

带删除按钮

叠加 Delete 按钮

通过默认 slot 叠加 ImgViewerDelete。

<script setup lang="ts">
import { ImgViewer, ImgViewerDelete } from '@tripo3d/design';
import { ref } from 'vue';

const images = ref([
  'https://picsum.photos/400/300?random=1',
  'https://picsum.photos/400/300?random=2',
]);

function remove() {
  images.value = [];
}
</script>

<template>
  <ImgViewer :src="images">
    <ImgViewerDelete @click="remove" />
  </ImgViewer>
</template>

点击缩略图打开浮窗预览

ImgViewer 不再内置放大按钮,需要放大请铺一个透明触发层调用 preview.show(),沿用 Previewer 的浮窗式预览。

点击缩略图打开 Previewer

铺一个透明 button 调用 preview.show()。

<script setup lang="ts">
import { ImgViewer, preview } from '@tripo3d/design';

const images = ['https://picsum.photos/400/300?random=1', 'https://picsum.photos/400/300?random=2'];

function open() {
  preview.show(images);
}
</script>

<template>
  <ImgViewer :src="images">
    <button class="inset-0 absolute" @click="open" />
  </ImgViewer>
</template>

API

ImgViewer Props

名称	类型	默认值	说明
src	string | File | Array<string | File>	—	图片源,支持单图或数组
class	string	—	容器 class

ImgViewer Slots

插槽	作用域	说明
default	—	操作层,用于叠加 ImgViewerDelete 或自定义触发区

ImgViewerDelete

无额外 Props,hover 时显示删除按钮覆盖层,点击事件由父组件处理。