T-Image 图片
- 示例代码路径：
/pages/components/t-image/t-image - 示例代码地址：https://gitee.com/turbo-ui/turbo-ui-demo/tree/master/pages/components/t-image/t-image
兼容端
| 安卓 | 苹果 | Web | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|
| ✅ | ✅ | ✅ | ❌ | ✅ |
使用示例
vue
<template>
<t-image src="/static/logo.png"></t-image>
<t-image :ma="['5px','0','0','0']" width="70" height="70" src="/static/logo.png"></t-image>
</template>属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | "" | 图片链接 |
| mode | String | "aspectFill" | 图片模式，可选值：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right |
| width | String | "50" | 宽度 |
| height | String | "50" | 高度 |
| round | Array<string> | [] | 圆角，格式：[水平半径, 垂直半径] 或 [左上, 右上, 右下, 左下] |
| lazyLoad | Boolean | true | 懒加载 |
| fadeShow | Boolean | true | 加载动画效果 |
| webp | Boolean | true | webp格式支持 |
| showMenuByLongpress | Boolean | true | 微信小程序长按菜单 |
| draggable | Boolean | false | H5端是否允许拖动图片 |
| ma | Array<string> | [] | 外边距，格式：[垂直, 水平] 或 [上, 右, 下, 左] |
| pa | Array<string> | [] | 内边距，格式：[垂直, 水平] 或 [上, 右, 下, 左] |
| preview | Boolean | false | 是否开启图片预览功能 |
方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| click | 图片点击事件 | Event |
| error | 图片加载错误事件 | Event |
| load | 图片加载完成事件 | Event |
插槽
| 插槽名 | 说明 |
|---|---|
| 无 | 该组件暂无插槽 |