vue3仿飞书头像，根据不同名称生成不同的头像背景色

效果展示：

传递三个参数：

• name：要显示的名称；
• size：头像的大小；
• cutNum：分割当前名称的最后几位数；

代码如下：

<template>
	<div
		:style="{
			color: '#fff',
			borderRadius: '50%',
			width: size + 'px',
			height: size + 'px',
			display: 'block',
			textAlign: 'center',
			lineHeight: size + 'px',
			fontSize: size * 0.4 + 'px',
			background: color(name)
		}"
	>
		{{ name.slice(-cutNum) }}
	</div>
</template>

<script lang="ts" setup>
defineProps({
	name: {
		type: String,
		default: ""
	},
	size: {
		type: Number,
		default: 16
	},
	cutNum: {
		type: Number,
		default: 1
	}
});

const color = (name: string) => {
	if (name) {
		let num = "";
		for (let i = 0; i < name.length; i++) {
			num += name[i].charCodeAt(0).toString();
		}
		const r = Math.min(100 + (parseInt(num.slice(0, 2), 10) % 55), 255);
		const g = Math.min(100 + (parseInt(num.slice(2, 4), 10) % 55), 255);
		const b = Math.min(100 + (parseInt(num.slice(4, 6), 10) % 55), 255);
		return `rgb(${r}, ${g}, ${b})`;
	} else {
		return "rgb(125, 125, 125)";
	}
};
</script>

使用代码如下：

<AuthorImage name="铁甲小宝" :size="74" :cut-num="2"></AuthorImage>