---
title: ImageViewer 图片预览
description: 当需要展示图片，并要进行部分操作时。
isComponent: true
usage: { title: "", description: "" }
spline: data,
author: 明淞
---

## 基本用法

- 通过 `images` 可配置预览图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。<br/>
- 通过 `visible` 可以控制预览的隐藏/显示，支持语法糖 `v-model`。<br/>

{{ base }}

#### 小窗口图片查看器

- 通过 `mode` 可设置预览模式，支持模态预览（modal）和非模态预览（modeless)，可选项：`modal` `modeless`。<br/>
- 通过 `draggable` 可设置预览状态是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽。

{{ modeless }}

#### 文字图片查看器

通过 `trigger` 可以自定义触发预览的元素，可能是一个预览按钮，可能是一张缩略图，支持 `String`，`Slot`。

{{ button }}

### 多张图预览查看器

当有多个图片时，在查看器内可以展开预览所有图片。

{{ multiple }}

### 相册预览

通过相册封面图，触发预览多张图片。

{{ album }}

### 渐进加载的预览

在原图未成功加载之前，渐进显示加载状态。

{{ block }}

### 加载失败的图片

加载失败的图片，用占位图显示，并提供相应的失败说明。可使用默认占位图，或自定义占位图。

{{ error }}

### 从操作拦触发的图片查看器

通过操作栏相关按钮，点击查看图片。

{{ albumIcons }}
