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

效果展示:
传递三个参数:
  • name:要显示的名称;
  • size:头像的大小;
  • cutNum:分割当前名称的最后几位数;
代码如下:
html 复制代码
<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>
相关推荐
盖伦发发7 天前
保姆级教程:如何用feishu2md快速下载飞书文档为md文件
飞书·传媒·内容运营
曹天骄7 天前
语雀与飞书对比
飞书·语雀
码界奇点11 天前
基于飞算JavaAI的在线图书借阅平台从设计到实现的完整指南
java·飞书
是垚不是土14 天前
Prometheus接入“飞书“实现自动化告警
运维·安全·自动化·github·飞书·prometheus
小一鹿呀1 个月前
Docker一键部署prometheus并实现飞书告警详解
docker·飞书·prometheus
zyplayer-doc1 个月前
知识库新增三方应用AI问答,新增标签管理,集成Excalidraw,重构全文检索,zyplayer-doc 2.5.4 发布啦!
人工智能·编辑器·全文检索·飞书·企业微信·开源软件·有道云笔记
爱学习的小道长2 个月前
使用 Dify 和 LangBot 搭建飞书通信机器人
android·java·飞书
一腔热血10072 个月前
prometheus alertmanager 对接飞书
数据库·飞书·prometheus
m0_621966012 个月前
飞书文档定时自动同步至百炼知识库
语言模型·飞书