Image 图片
图片容器，在保留所有原生 img 的特性下，支持懒加载，自定义占位、加载失败等
ts
import { createApp } from 'vue'
import { ElImage, ElImageViewer } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElImage)
app.use(ElImageViewer)基础用法
占位内容
加载失败
懒加载
提示
浏览器原生支持 loading 属性。您可以使用 loading="lazy" 替换之前的 lazy= true。
如果当前浏览器支持原生图片延迟加载，则先使用原生能力，否则将使用滚动监听实现相同效果。
图片预览
手动打开预览
自定义工具栏
自定义进度条
Image API
Image Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| src | 图片源地址，同原生属性一致 | string | '' |
| fit | 确定图片如何适应容器框，同原生 object-fit | enum | '' |
| hide-on-click-modal | 当开启 preview 功能时，是否可以通过点击遮罩层关闭 preview | boolean | false |
| loading | 浏览器加载图像的策略，和 浏览器原生能力一致 | enum | — |
| lazy | 是否使用懒加载 | boolean | false |
| scroll-container | 开启懒加载功能后，监听 scroll 事件的容器 默认情况下，开启懒加载功能后，监听 scroll 事件的容器 | string / object | — |
| alt | 原生属性 alt | string | — |
| referrerpolicy | 原生属性 referrerPolicy。 | string | — |
| crossorigin | 原生属性 crossorigin | enum | — |
| preview-src-list | 开启图片预览功能 | array | [] |
| z-index | 设置图片预览的 z-index | number | — |
| initial-index | 初始预览图像索引，小于 url-list 的长度 | number | 0 |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Image Viewer | boolean | true |
| preview-teleported | image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true | boolean | false |
| infinite | 是否可以无限循环预览 | boolean | true |
| zoom-rate | 图像查看器缩放事件的缩放速率。 | number | 1.2 |
| scale | 预览图像缩放。 | number | 1 |
| min-scale | 图像查看器缩放事件的最小缩放比例 | number | 0.2 |
| max-scale | 图像查看器缩放事件的最大缩放比例 | number | 7 |
| show-progress | 是否在预览图片时显示进度条 | boolean | false |
Image Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| load | 图片加载成功触发 | Function |
| error | 图片加载失败触发 | Function |
| switch | 切换图像时触发。 | Function |
| close | 当点击 X 按钮或者在hide-on-click-modal为 true 时点击遮罩层时触发 | Function |
| show | 当 Viewer 显示时触发 | Function |
Image Slots
| 插槽名 | 说明 | 类型 |
|---|---|---|
| placeholder | 当图像尚未加载时，自定义的占位符内容 | - |
| error | 自定义图像加载失败的内容 | - |
| image viewer slots | 当你允许大的图像预览时，可以使用图像预览的插槽。 | - |
Image Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| showPreview | 手动打开大图预览 | Function |
Image Viewer API
Image Viewer Attributes
| 事件名 | 说明 | Type | 默认值 |
|---|---|---|---|
| url-list | 用于预览的图片链接列表 | array | [] |
| 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 |
| scale | 预览图像缩放。 | number | 1 |
| min-scale | 图像查看器缩放事件的最小缩放比例 | number | 0.2 |
| max-scale | 图像查看器缩放事件的最大缩放比例 | number | 7 |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Image Viewer | boolean | true |
| show-progress | 是否显示预览图片的进度条内容 | boolean | false |
Image Viewer Events
| Name | 说明 | 类型 |
|---|---|---|
| close | 当点击 X 按钮或者在hide-on-click-modal为 true 时点击遮罩层时触发 | Function |
| error | 图片加载失败触发 | Function |
| switch | 切换图像时触发。 | Function |
| rotate | 旋转图像时触发。 | Function |
Image Viewer Slots
| 名称 | 详情 | 类型 |
|---|---|---|
| viewer | 自定义内容 | - |
| progress | 自定义进度内容 (优先级高于 show-progress prop) | object |
| toolbar | 自定义工具栏内容 | object |
| viewer-error | 自定义图像加载失败的内容 | object |
Image Viewer Exposes
| Name | Description | Type |
|---|---|---|
| setActiveItem | 手动切换图片 | Function |