# tui-image-group 图片组合

介绍

Image Group图片组合,可设置图片宽高,圆角,偏移距离等,可设置排列方向。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiImageGroup from "@/components/thorui/tui-image-group/tui-image-group.vue"
export default {
	components:{
		tuiImageGroup
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-image-group": "/components/thorui/tui-image-group/tui-image-group"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

单图展示

通过 imageList 属性设置图片地址,radius 属性设置图片圆角。

<!--uni-app-->
<tui-image-group :imageList="imageList" radius="0"></tui-image-group>
<tui-image-group :imageList="imageList" radius="20rpx"></tui-image-group>

<!--微信小程序-->
<tui-image-group imageList="{{imageList}}" radius="0"></tui-image-group>
<tui-image-group imageList="{{imageList}}" radius="20rpx"></tui-image-group>
//data数据
imageList:[{
	id:1,
	src:"/static/images/product/2.jpg"
}]
组合图,排列方向 row

通过 isGroup 属性设置是否为组合图展示,width 属性设置图片宽度,height 属性设置图片宽度。

组合图默认排列方向为row 水平排列,可通过 direction 属性设置为column,即纵向排列。

<!--uni-app-->
<tui-image-group :imageList="imageList" isGroup width="60rpx" height="60rpx"></tui-image-group>

<!--微信小程序-->
<tui-image-group imageList="{{imageList}}" isGroup width="60rpx" height="60rpx"></tui-image-group>
//data数据
imageList:[{
	id:1,
	src:"/static/images/product/1.jpg"
},{
	id:2,
	src:"/static/images/product/2.jpg"
},{
	id:3,
	src:"/static/images/product/3.jpg"
},{
	id:4,
	src:"/static/images/product/4.jpg"
}]

# Slots

名称 说明
default 标签内显示内容,可忽略

# Props

参数 类型 说明 默认值
imageList Array 图片路径,格式:[{id:1,src:"1.png"}] [ ]
width String 图片宽度 120rpx
height String 图片高度 120rpx
borderWidth String 图片边框宽度 rpx 0
borderColor String 图片边框颜色 可传rgba #fff
radius String 图片圆角 50%
mode String 图片裁剪、缩放的模式 scaleToFill
lazyLoad Boolean 图片懒加载。只针对page与scroll-view下的image有效 true
fadeShow Boolean 图片显示动画效果 仅App-nvue 2.3.4+ Android有效
webp Boolean 默认不解析 webP 格式,只支持网络资源 微信小程序2.9.0
longpress Boolean 开启长按图片显示识别小程序码菜单 微信小程序2.7.0
isGroup Boolean 是否组合排列 false
direction String 排列方向 row ,column row
distance [Number, String] 偏移距离 rpx -16
multiLine Boolean 是否可多行展示,排列方向=row时生效,distance需设置为大于0的数 false

# Events

事件名 说明 回调参数
errorEvent 图片加载出错 错误信息 e
loaded 图片加载完成 完成信息 e
click 图片点击事件 {
  index : 图片索引,
  id : id值,父组件传入
}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码