Skip to content
On this page

组件库文档 tmui.design

图片 Image

可以搭配图片组tm-image-group使用,形成一个图片相册展示。提供了预览,删除,增强内容显示。


🌶️ 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<view>
				<tm-image preview :width="300" :height="200" src="https://store.tmui.design/api_v2/public/random_picture"></tm-image>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="关闭按钮"></tm-text>
			<tm-divider></tm-divider>
			<view>
				<tm-image delete preview :width="300" :height="200" src="https://store.tmui.design/api_v2/public/random_picture?random=2"> </tm-image>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="展示额外的内容"></tm-text>
			<tm-divider></tm-divider>
			<tm-image extra preview :width="300" :height="200" src="https://store.tmui.design/api_v2/public/random_picture?random=3">
				<template v-slot:extra>
					<tm-sheet :margin="[0, 0]" :padding="[12, 10]" _class="flex-row flex-between " parenClass="opacity-6">
						<view class="flex flex-row flex-center pl-16">
							<tm-icon :font-size="24" name="tmicon-comment-dots"></tm-icon>
							<tm-text _class="pl-10" :font-size="24" label="125"></tm-text>
						</view>
						<view class="flex flex-row flex-center pl-16">
							<tm-icon :font-size="24" name="tmicon-md-heart"></tm-icon>
							<tm-text _class="pl-10" :font-size="24" label="125"></tm-text>
						</view>
					</tm-sheet>
				</template>
			</tm-image>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="图片组,组成简单的相册集"></tm-text>
			<tm-divider></tm-divider>
			<tm-image-group>
				<tm-image
					:padding="[2, 2]"
					preview
					:width="155"
					:height="156"
					:src="'https://store.tmui.design/api_v2/public/random_picture?random=' + item"
					v-for="item in 14"
					:key="item"
				></tm-image>
			</tm-image-group>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmImageGroup from '@/tmui/components/tm-image-group/tm-image-group.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
marginArray[0,0]外间距[x,y]x=左右,y=上下
paddingArray[0,0]内间距[x,y]x=左右,y=上下
colorString'white'边框颜色
transprent[Boolean]true是否透明
borderNumber0边框宽度
roundNumber,String0圆角, 0-25
width[Number,String]200,required:true宽度,单位rpx
height[Number,String]200,required:true高度,单位rpx
srcString"",required:true图片地址
errorIconString''加载错误icon
errorLabelString'加载错误'加载错误提示文字
loadIconString''加载中Icon
preview[Boolean,String]false是否开启预览。
extra[Boolean,String]false是否开启图片额外插槽显示内容。
extraPositionString'in'in:叠加图片上显示,out:图片下方显示
delete[Boolean,String]false展示关闭删除按钮。
allowDelete[Boolean,String]true是否允许点击delete图标关闭自己,如果为false,将仅触发delete事件,本身图片不会被关闭。
modelString'scaleToFill'图片缩放模式,同官方阅读:https://uniapp.dcloud.io/component/image.html
unitString'rpx'单位
showLoadv3.0.77+Booleantrue是否显示加载动画
showMenuByLongPress[Boolean]false长按是否显示识别菜单

🌹 事件

事件名参数返回数据描述
@loadimginfoObject返回:{width,height},图片加载完成时触发
@error出错信息Object当图片发生错误时触发此事件
@click当前图片地址String点击图片时触发
@delete返回已删除图片的路径String删除每一张都会触发。

🌽 slot插槽

属性名称类型数据说明
extra展示额外的内容
error加载错误时的插槽
load加载中时的插槽

🥗 ref方法

🥗 图片组 image-group

特别提醒

它不能单独使用,必须和tm-image配合使用。

props属性表

参数名类型默认值描述
width[Number, String]0默认为0,宽度自动。

贡献者

Mr.童