# 图片组合

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

# 组件使用

	<view class="tui-title">组合图 row | 设置偏移距离</view>
	<view class="tui-image-box">
		<tui-image-group :imageList="imageList2" isGroup width="60rpx" height="60rpx"></tui-image-group>
	</view>
	<view class="tui-image-box">
		<tui-image-group :imageList="imageList2" isGroup width="80rpx" height="80rpx" :distance="-30"></tui-image-group>
	</view>
	<view class="tui-title">组合图 row 多行展示</view>
	<view class="tui-image-box">
		<tui-image-group :imageList="imageList3" isGroup width="60rpx" height="60rpx" :distance="16" multiLine></tui-image-group>
	</view>
	<view class="tui-title">组合图 column</view>
	<view class="tui-image-box">
		<tui-image-group :imageList="imageList2" isGroup width="60rpx" height="60rpx" direction="column"></tui-image-group>
	</view>
	<view class="tui-image-box">
		<tui-image-group :imageList="imageList2" isGroup width="80rpx" height="80rpx" radius="12rpx" direction="column"></tui-image-group>
	</view>

# 组件脚本

<script>
	export default {
		name: 'tuiImageGroup',
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# 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

# methods

名称 描述
@errorEvent 图片加载出错
@loaded 图片加载完成
@click 点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/image/image

# H5二维码

# 小程序二维码