Vue에서 이름 기반 아바타 구성 요소를 구현하는 방법

이미지 없이 사용자에게 아바타를 표시하는 일반적인 방법 중 하나는 색이 있는 원에 첫 글자를 표시하는 것입니다.

이러한 구성 요소를 만들 때 다음 사항을 고려해야 합니다.

제공된 경우 이미지를 표시해야 합니다.

동일한 사용자 이름에 대해 동일한 배경색을 표시해야 합니다.

문자의 글꼴 크기는 컨테이너 크기에 따라 반응해야 합니다.

코드

이 예에서 구성 요소의 이름을 지정했습니다Avatar.vue. 따라서 사용 코드는 다음과 같습니다.

<!-- This will show the image version -->
<Avatar name="Test User" image="/image.png" />

<!-- This will show the first letter version -->
<Avatar name="Test User" />

아래 코드에서는 css에 변수를 바인딩할 수 있는 Vue 3 기능인 css에서 v-bind()를 사용하고 있습니다. Vue 2를 사용하는 경우 스타일 바인딩을 대신 사용해야 합니다. 좋아요 <div :style="{ backgroundColor: bgColor }></div> .
Avatar.vue에 대한 코드는 다음과 같습니다.

<template>
  <div ref="containerRef" class="avatar">
    <img v-if="image" :src="image" class="image" :alt="name" />
    <span v-else-if="name" class="initials">
      {{ name[0] }}
    </span>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
  image: {
    type: String,
    default: ''
  },

  name: {
    type: String,
    default: ''
  }
})

const containerRef = ref()
const fontSize = ref('1rem')

onMounted(() => {
  // The font size should be 50% of the container width
  fontSize.value = `${containerRef.value.clientWidth * 0.5}px`
})

const bgColor = computed(() => {
  // Don't show a color if the image is provided
  if (props.image) {
    return 'transparent'
  }
  // Calculate the hue value based on the name
  const hue =
    props.name.split('').reduce((acc, cur) => {
      return acc + cur.charCodeAt(0)
    }, 0) % 360
  return `hsla(${hue}, 60%, 50%, 1)`
})
</script>

<style scoped>
.avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* bind the background color to bgColor */
  background: v-bind(bgColor);
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.initials {
  /* bind the font-size to fontSize */
  font-size: v-bind(fontSize);
  color: white;
  font-family: sans-serif;
  user-select: none;
}
</style>

이 구성 요소에 특정 이름을 전달하면 항상 동일한 배경색을 갖게 됩니다. bgColor 계산 속성에서 이름에 있는 각 문자의 문자 코드 합계를 기준으로 색상을 계산하기 때문에 이렇게 작동합니다.

채도 및 밝기와 같은 다른 구성 요소와 별도로 색상 값을 제어할 수 있도록 색상에 hsla를 사용하고 있습니다.

이 예에서는 글꼴 크기를 컨테이너 너비의 절반으로 설정했습니다. 따라서 더 작게 또는 더 크게 만들고 싶다면 0.5 에서 fontSize.value = ${containerRef.value.clientWidth * 0.5}px 를 변경하면 됩니다.


이 기사가 마음에 들면 my blog에서 이와 유사한 기사를 더 확인하십시오.
또한 코딩 팁과 최신 작업을 공유합니다. 우리 친구하자!