---
title: ImageViewer 图片预览
description: 预览图片内容。
spline: base
isComponent: true
toc: false
---

### 基础用法

`ImageViewer` 组件可以通过 `visible` 控制隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible`

{{ base }}

### 图片数组

通过 `images` 可以传入待预览的图片数组

{{  imageList }}


### 自定义遮罩

通过 `background-color` 可以自定义遮罩颜色

{{ background }}

#### 不展示关闭按钮

通过 `closeBtn`  可以展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。

{{ closeBtn }}

### 默认展示第二张图片

通过 `initialIndex` 可以初始化页码，默认展示指定图片

{{ initialIndex }}
### 监听关闭事件

`ImageViewer`组件的 `close` 事件，可以在关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键

{{ closeEvent }}


