Avatar 头像

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

支持平台

安卓	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

名称	描述	类型	默认值	可选值
src	图片源地址	String	''	-
mode	图片裁剪、缩放的模式	String	'scaleToFill'	'scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix', 'top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right'
icon	显示的图标	String	''	-
text	显示的文字	String	''	-
imageClass	图片的类名	String	''	-
iconClass	图标的类名	String	''	-
textClass	文字的类名	String	''	-
randombackgroundColor	是否启用随机背景颜色	Boolean	false	true, false
type	组件场景	String	""	'info', 'primary', 'error', 'warning', 'success'
disabled	是否禁用	Boolean	false	true, false
stop	是否阻止事件冒泡	Boolean	false	true, false
hover	是否有鼠标悬停效果	Boolean	false	true, false
effect	组件效果	String	""	'normal', 'dark', 'light', 'plain'

Events

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

Slots

名称	描述
-	-