Tui-Plus3.0.0

Appearance

Avatar (头像) ​

背景随机色文字头像,头像组,丰富主题样式

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page title="头像">
		<t-card main-class="mlrt-30" title="Avatar 头像" sub-title="背景随机色文字头像,头像组,丰富主题样式"></t-card>
		<introduction title="基础演示">
			<t-avatar :src="src"></t-avatar>
		</introduction>
		<introduction title="头像形状">
			<t-row main-class="plr-30">
				<t-avatar :src="src" main-class="mr-30"></t-avatar>
				<t-avatar main-class="r-10 mr-30 r-10" :src="src"></t-avatar>
				<t-avatar main-class="r-30 mr-30" :src="src"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="头像尺寸">
			<t-row main-class="plr-30">
				<t-avatar main-class="mr-30" :src="src"></t-avatar>
				<t-avatar main-class="twh-100 mr-30 r-10" :src="src"></t-avatar>
				<t-avatar main-class="twh-150 mr-30" :src="src"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="图标头像">
			<t-row main-class="plr-30 fww">
				<t-avatar icon="star-fill" main-class="mr-30 twh-50 r-10"></t-avatar>
				<t-avatar icon="star-fill" main-class="mr-30 s-45"></t-avatar>
				<t-avatar icon="star-fill" main-class="mr-30"></t-avatar>
				<t-avatar icon="red-packet-fill" main-class="s-100 mr-30 r-10"></t-avatar>
				<t-avatar icon="red-packet-fill" main-class="s-100 mr-30 r-10"></t-avatar>
				<t-avatar icon="red-packet-fill" main-class="s-100 mr-30 r-10"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="文字头像">
			<t-row main-class="plr-30 fww">
				<t-avatar text="谭元" main-class="twh-80 mr-30"></t-avatar>
				<t-avatar text="谭" main-class="twh-80 mr-30"></t-avatar>
				<t-avatar text="谭" main-class="twh-80 mr-30"></t-avatar>
				<t-avatar text="谭" main-class="twh-80 mr-30"></t-avatar>
				<t-avatar text="谭" main-class="twh-80 mr-30"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="文字头像">
			<t-row main-class="plr-30 fww">
				<t-avatar text="谭" main-class="mrb-30"></t-avatar>
				<t-avatar text="谭" main-class="mrb-30"></t-avatar>
				<t-avatar text="谭" main-class="mrb-30"></t-avatar>
				<t-avatar text="谭" main-class="mrb-30"></t-avatar>
				<t-avatar text="谭" main-class="mrb-30"></t-avatar>
				<t-avatar text="谭" main-class="mrb-30"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="头像组">
			<t-avatar-group :maxCount="3" :list="urls">
				<template v-slot:default="{item}">
					<t-avatar-item :src="`${item}`"></t-avatar-item>
				</template>
			</t-avatar-group>
		</introduction>
		<introduction title="头像组-样式设置">
			<t-avatar-group :maxCount="4" main-class="tdr tdb tdp" :list="urls">
				<template v-slot:default="{item}">
					<t-avatar-item :src="`${item}`" main-class="twh-120 ml-n30"></t-avatar-item>
				</template>
			</t-avatar-group>
		</introduction>
		<introduction title="头像组-混合使用">
			<t-avatar-group :list="urls1">
				<template v-slot:default="{item}">
					<t-avatar-item v-if="`${(item as UTSJSONObject)['type']}`=='text'"
						:text="`${(item as UTSJSONObject)['value']}`"></t-avatar-item>
					<t-avatar-item v-if="`${(item as UTSJSONObject)['type']}`=='icon'"
						:icon="`${(item as UTSJSONObject)['value']}`"></t-avatar-item>
					<t-avatar-item v-if="`${(item as UTSJSONObject)['type']}`=='image'"
						:src="`${(item as UTSJSONObject)['value']}`"></t-avatar-item>
				</template>
			</t-avatar-group>
		</introduction>
	</t-page>
</template>
<script>
	export default {
		data() {
			return {
				sty: ['margin-right:30rpx;margin-bottom:20rpx;'],
				src: '/pagesA/static/image/avatar.jpeg',
				urls1: [
					{ type: 'text', value: '张' },
					{ type: 'text', value: '李' },
					{ type: 'icon', value: 'red-packet-fill' },
					{ type: 'image', value: '/pagesA/static/image/avatar/1.jpg' },
				],
				urls: [
					'/pagesA/static/image/avatar/1.jpg',
					'/pagesA/static/image/avatar/2.jpg',
					'/pagesA/static/image/avatar/3.jpg',
					'/pagesA/static/image/avatar/4.jpg',
					'/pagesA/static/image/avatar/5.jpg',
					'/pagesA/static/image/avatar/6.jpg',
				]
			};
		}
	}
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
modeStringscaleToFill图片裁剪、缩放的模式scaleToFill: 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill: 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
widthFix: 宽度不变，高度自动变化，保持原图宽高比不变
heightFix: 高度不变，宽度自动变化，保持原图宽高比不变
top: 不缩放图片，只显示图片的顶部区域
bottom: 不缩放图片，只显示图片的底部区域
center: 不缩放图片，只显示图片的中间区域
left: 不缩放图片，只显示图片的左边区域
right: 不缩放图片，只显示图片的右边区域
top left: 不缩放图片，只显示图片的左上边区域
top right: 不缩放图片，只显示图片的右上边区域
bottom left : 不缩放图片，只显示图片的左下边区域
bottom right: 不缩放图片，只显示图片的右下边区域
iconString``字体图标字体的名称
textString``文字头像，文字的内容
srcString``头像的图片地址
randombackgroundColorBooleantrue是否随机背景色

事件 ​

名称返回参数说明
click(e : UniPointerEvent)-