# image-viewer (w-image-viewer)

- **Import**: `WImageViewer` from `win-design-next`
- **Tag**: `<w-image-viewer>`
- **说明**: WImageViewer
- **分类**: data-display
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/image.md`

## API

## Image Viewer API

### Attributes

| 事件名                | 说明                                                                                     | Type                  | 默认值 |
| --------------------- | ---------------------------------------------------------------------------------------- | --------------------- | ------ |
| url-list              | 用于预览的图片链接列表                                                                   | ^[object]`string[]`   | []     |
| z-index               | 预览时遮罩层的 z-index                                                                   | ^[number] / ^[string] | —      |
| initial-index         | 初始预览图像索引，小于 `url-list` 的长度                                                 | ^[number]             | 0      |
| infinite              | 是否可以无限循环预览                                                                     | ^[boolean]            | true   |
| hide-on-click-modal   | 是否可以通过点击遮罩层关闭预览                                                           | ^[boolean]            | false  |
| teleported            | image 自身是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 `true` | ^[boolean]            | false  |
| zoom-rate             | 图像查看器缩放事件的缩放速率。                                                           | ^[number]             | 1.2    |
| min-scale             | 图像查看器缩放事件的最小缩放比例                                                         | ^[number]             | 0.2    |
| max-scale             | 图像查看器缩放事件的最大缩放比例                                                         | ^[number]             | 7      |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Image Viewer                                                   | ^[boolean]            | true   |
| show-progress         | 是否显示预览图片的进度条内容                                                             | ^[boolean]            | false  |

### Events

| Name   | 说明                                                               | 类型                                 |
| ------ | ------------------------------------------------------------------ | ------------------------------------ |
| close  | 当点击 X 按钮或者在`hide-on-click-modal`为 true 时点击遮罩层时触发 | ^[Function]`() => void`              |
| switch | 切换图像时触发。                                                   | ^[Function]`(index: number) => void` |
| rotate | 旋转图像时触发。                                                   | ^[Function]`(deg: number) => void`   |

### Exposes

| 名称          | 详情         | 类型                                 |
| ------------- | ------------ | ------------------------------------ |
| setActiveItem | 手动切换图片 | ^[Function]`(index: number) => void` |
