Avatar-Group 头像组

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

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="头像">
		<t-card class="mlrt.30" title="Avatar 头像" sub-title="背景随机色文字头像,头像组,丰富主题样式"></t-card>
		<introduction title="基础演示">
			<t-avatar :src="src"></t-avatar>
		</introduction>
		<introduction title="头像形状">
			<t-row class="plr.30">
				<t-avatar :src="src" class="mr.30"></t-avatar>
				<t-avatar class="r.10-mr.30-r.10" :src="src"></t-avatar>
				<t-avatar class="r.30-mr.30" :src="src"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="头像尺寸">
			<t-row class="plr.30">
				<t-avatar class="twh.50-mr.30" :src="src"></t-avatar>
				<t-avatar class="twh.100-mr.30-r.10" :src="src"></t-avatar>
				<t-avatar class="twh.150-mr.30" :src="src"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="图标头像">
			<t-row class="plr.30">
				<t-avatar icon="star-fill" class="twh.50-mr.30" :randombackgroundColor="true"></t-avatar>
				<t-avatar icon="star-fill" class="twh.50-mr.30" :randombackgroundColor="true"></t-avatar>
				<t-avatar icon="star-fill" class="twh.50-mr.30" :randombackgroundColor="true"></t-avatar>
				<t-avatar icon="red-packet-fill" class="twh.100-mr.30-r.10" iconClass="s.80rpx"
					:randombackgroundColor="true"></t-avatar>
				<t-avatar icon="red-packet-fill" class="twh.100-mr.30-r.10" iconClass="s.80rpx"
					:randombackgroundColor="true"></t-avatar>
				<t-avatar icon="red-packet-fill" class="twh.100-mr.30-r.10" iconClass="s.80rpx"
					:randombackgroundColor="true"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="文字头像">
			<t-row class="plr.30">
				<t-avatar text="谭元" class="twh.80-mr.30" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.80-mr.30" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.80-mr.30" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.80-mr.30" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.80-mr.30" :randombackgroundColor="true"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="文字头像">
			<t-row class="plr.30">
				<t-avatar text="谭" class="twh.50-mr.30" textClass="s.30rpx" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.50-mr.30" textClass="s.30rpx" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.50-mr.30" textClass="s.30rpx" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.50-mr.30" textClass="s.30rpx" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.50-mr.30" textClass="s.30rpx" :randombackgroundColor="true"></t-avatar>
				<t-avatar text="谭" class="twh.50-mr.30" textClass="s.30rpx" :randombackgroundColor="true"></t-avatar>
			</t-row>
		</introduction>
		<introduction title="头像组">
			<t-avatar-group :maxCount="3" childClass='twhr.60rpx'>
				<t-avatar v-for="(item,index) in urls" :src="item" :key="index"></t-avatar>
			</t-avatar-group>
		</introduction>
		<introduction title="头像组-样式设置">
			<t-avatar-group :maxCount="3" childClass='twh.60rpx-r.10'>
				<t-avatar v-for="(item,index) in urls" :src="item" :key="index"></t-avatar>
			</t-avatar-group>
		</introduction>
		<introduction title="头像组-混合使用">
			<t-avatar-group :maxCount="3" class="c.blue" childClass='twhr.60rpx' :gap="0.3">
				<t-avatar text="张"></t-avatar>
				<t-avatar text="谭"></t-avatar>
				<t-avatar text="王"></t-avatar>
				<t-avatar src="/static/image/avatar/6.jpg"></t-avatar>
			</t-avatar-group>
		</introduction>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				sty: ['margin-right:30rpx;margin-bottom:20rpx;'],
				src: '/static/image/avatar.jpeg',
				urls: [
					'/static/image/avatar/1.jpg',
					'/static/image/avatar/2.jpg',
					'/static/image/avatar/3.jpg',
					'/static/image/avatar/4.jpg',
					'/static/image/avatar/5.jpg',
					'/static/image/avatar/6.jpg',
				]
			};
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
maxCount	最大显示数量	Number	5	-
shape	头像形状	String	'circle'	circle-圆形 / square-方形
childClass	子元素类名	String	""	-
gap	头像之间的间隙	Number	0.5	-

Events

事件名	描述	回调参数	版本
-	-	-	-

Slots

名称	描述
-	-