图片组合

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

组件结构

<template>
	<view class="tui-image-container" :class="{ 'tui-image-direction': direction == 'column' }">
		<view
			v-for="(item, index) in imageList"
			:key="index"
			class="tui-image-item_box"
			:style="{
				width: width,
				height: height,
				borderRadius: radius,
				marginLeft: direction == 'column' ? 0 : (index && distance) + 'rpx',
				marginTop: direction == 'row' ? 0 : (index && distance) + 'rpx'
			}"
			@tap="bindClick(index, item.id)"
		>
			<image
				class="tui-image-item"
				:mode="mode"
				:lazy-load="lazyLoad"
				fade-show="fadeShow"
				:webp="webp"
				:show-menu-by-longpress="longpress"
				@error="error"
				@load="load"
				:style="{ width: width, height: height, borderRadius: radius, borderWidth: borderWidth, borderColor: borderColor }"
				:src="item.src"
			></image>
			<slot />
		</view>
	</view>
</template>

组件脚本

<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

methods

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

示例

H5预览地址

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

H5二维码

小程序二维码