t-image
Image 图片
组件介绍
t-image 是 image 组件的加强版，在原有功能增加加载中、加载失败提示、圆角值和形状等。提供更完善的图片展示体验。
平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
基础用法
基础用法参考 demo/image/image.uvue，通过 src 属性设置图片地址。
vue
<!-- 基础图片 -->
<t-image src="/static/photo.jpg" class="w-200 h-200"></t-image>
<!-- 圆角图片 -->
<t-image src="/static/avatar.jpg" class="w-100 h-100 r-50%"></t-image>
<!-- 加载占位 -->
<t-image src="/static/photo.jpg" placeholder="加载中..." class="w-200 h-200"></t-image>
<!-- 图片预览 -->
<t-image src="/static/photo.jpg" :preview="true" class="w-200 h-200"></t-image>
<!-- 自适应高度 -->
<t-image src="/static/photo.jpg" mode="widthFix" class="w-100%"></t-image>Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
path | 点击组件后跳转的页面路径；为空时仅响应事件 | string | '' |
hover | 是否启用点击效果 | boolean | true |
type | 组件主题类型，可选 info、primary、error、warning、success | string | '' |
disabled | 是否禁用 | boolean | false |
effect | 组件显示主题，可选 normal、dark、light、plain | string | 'normal' |
size | 组件尺寸，可选 large、medium、small、mini | string | 'medium' |
src | 图片资源地址 | string | '' |
mode | 图片裁剪、缩放的模式 | string | 'scaleToFill' |
placeholder | 加载失败时的占位文字 | boolean | false |
preview | 是否支持预览 | boolean | false |
fadeShow | 图片加载是否显示淡入动画效果 | boolean | true |
loading | 加载时的文字 | string | '' |
imageClass | image 样式，对应外部类 image-class | string | '' |
loadingClass | loading 文字样式，对应外部类 loading-class | string | '' |
placeholderClass | placeholder 文字样式，对应外部类 placeholder-class | string | '' |
mode 可选值
| 值 | 说明 |
|---|---|
scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来 |
aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来 |
widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 |
top | 不缩放图片，只显示图片的顶部区域 |
bottom | 不缩放图片，只显示图片的底部区域 |
center | 不缩放图片，只显示图片的中间区域 |
left | 不缩放图片，只显示图片的左边区域 |
right | 不缩放图片，只显示图片的右边区域 |
top left | 不缩放图片，只显示图片的左上边区域 |
top right | 不缩放图片，只显示图片的右上边区域 |
bottom left | 不缩放图片，只显示图片的左下边区域 |
bottom right | 不缩放图片，只显示图片的右下边区域 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击时触发 | - |
load | 图片加载完成时触发 | - |
error | 图片加载失败时触发 | - |
transitionend | 动画结束时触发 | - |
initFinished | 组件初始化完成时触发，返回组件节点信息 | - |
touchstart | 触摸开始时触发 | - |
touchend | 触摸结束时触发 | - |
touchmove | 触摸移动时触发 | - |
touchcancel | 触摸取消时触发 | - |
外部类
| 类名 | 说明 |
|---|---|
image-class | 图片样式 |
loading-class | 加载文字样式 |
placeholder-class | 占位文字样式 |
Slots
| 插槽名 | 说明 |
|---|---|
loading | 加载中状态插槽 |
error | 加载失败状态插槽 |