im-backed/im-web/src/components/common/HeadImage.vue

<template>
	<div class="head-image" @click="showUserInfo($event)" :style="{cursor : isShowUserInfo ? 'pointer': null}">
		<img class="avatar-image" v-show="url" :src="url" :style="avatarImageStyle" loading="lazy" />
		<div class="avatar-text" v-show="!url" :style="avatarTextStyle">
			{{name?.substring(0,2).toUpperCase()}}
		</div>
		<div v-show="online" class="online" title="用户当前在线"></div>
		<slot></slot>
	</div>
</template>

<script>
	export default {
		name: "headImage",
		data() {
			return {
				colors: ["#5daa31", "#c7515a", "#e03697", "#85029b",
					"#c9b455", "#326eb6"
				]

			}
		},
		props: {
			id: {
				type: Number
			},
			size: {
				type: Number,
				default: 42
			},
			width: {
				type: Number
			},
			height: {
				type: Number
			},
			radius: {
				type: String,
				default: "50%"
			},
			url: {
				type: String
			},
			name: {
				type: String,
				default: null
			},
			online: {
				type: Boolean,
				default: false
			},
			isShowUserInfo: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			showUserInfo(e) {
				if (!this.isShowUserInfo) return;
				if (this.id && this.id > 0) {
					this.$http({
						url: `/user/find/${this.id}`,
						method: 'get'
					}).then((user) => {
						this.$store.commit("setUserInfoBoxPos", e);
						this.$store.commit("showUserInfoBox", user);
					})
				}
			}
		},
		computed: {
			avatarImageStyle() {
				let w = this.width ? this.width : this.size;
				let h = this.height ? this.height : this.size;
				return `width:${w}px; height:${h}px;
					border-radius: ${this.radius};`
			},
			avatarTextStyle() {
				let w = this.width ? this.width : this.size;
				let h = this.height ? this.height : this.size;
				return `
				  width: ${w}px;height:${h}px;
					background-color: ${this.name ? this.textColor : '#fff'};
					font-size:${w*0.35}px;
					border-radius: ${this.radius};
					`
			},
			textColor() {
				let hash = 0;
				for (var i = 0; i < this.name.length; i++) {
					hash += this.name.charCodeAt(i);
				}
				return this.colors[hash % this.colors.length];
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-image {
		position: relative;
		//cursor: pointer;

		.avatar-image {
			position: relative;
			overflow: hidden;
			display: block;
		}

		.avatar-text {
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			//border: 1px solid #ccc;
			//box-shadow: var(--im-box-shadow);
		}

		.online {
			position: absolute;
			right: -5px;
			bottom: 0;
			width: 12px;
			height: 12px;
			background: limegreen;
			border-radius: 50%;
			border: 2px solid white;
		}
	}
</style>