Tui-Plus3.0.0

Appearance

AvatarGroup (头像组) ​

头像组件的组合

支持平台 ​

安卓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(镂空)
maxCountNumber5最大显示数量
listany``头像列表的配置

事件 ​

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

插槽 ​

名称返回值说明
default-