# 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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		imageList:[{
 		   id:1,
 		   src:"/static/images/product/2.jpg"
 		}]
 	}
 },
 methods: {
 	
	}
}

<!--微信小程序-->
<tui-image-group imageList="{{imageList}}" radius="0"></tui-image-group>
<tui-image-group imageList="{{imageList}}" radius="20rpx"></tui-image-group>

// data 数据 及 方法
Page({
  data: {
    imageList:[{
    	 id:1,
      src:"/static/images/product/2.jpg"
    }]
  }
})

// Make sure to add code blocks to your code group

组合图，排列方向 row

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

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

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

// data 数据 及 方法
export default {
 data() {
 	return {
 		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"
 		}]
 	}
 },
 methods: {
 	
 }
}

<!--微信小程序-->
<tui-image-group imageList="{{imageList}}" isGroup width="60rpx" height="60rpx"></tui-image-group>

// data 数据 及 方法
Page({
  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"
    }]
  }
})

// Make sure to add code blocks to your code group

# 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

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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