Avatar 아바타

사용자 아바타를 표시하는 컴포넌트예요.

출처: 문서

본문

사용자 아바타를 표시하는 컴포넌트예요.

언제 사용하나요?

사용자 아바타를 표시해야 할 때 사용해요.

아바타 표시의 기본 규칙

아바타 컴포넌트에 'name' 속성을 넘기면 일정 규칙에 따라 아바타 글자를 표시해요. 구체적인 규칙은 API를 참고하세요.

:::demo

<template>
  <div class="avatar-demo-1">
    <d-avatar style="text-align: right" gender="Female" name="组件头像"></d-avatar>
    <d-avatar name="MyAvatar"></d-avatar>
    <d-avatar name="Avatar1 Avatar2"></d-avatar>
    <d-avatar name="1Avatar"></d-avatar>
  </div>
</template>
<style>
.avatar-demo-1 .devui-avatar {
  margin-right: 10px;
}
</style>

:::

아바타의 기본 설정

아바타 컴포넌트는 너비, 높이, 원형 여부를 설정할 수 있고, 표시 글자를 직접 정하거나 커스텀 이미지를 넘기는 것, 이미지 로딩 실패 시 내용 표시를 제어하는 것 등도 가능해요.

:::demo

<template>
  <div class="avatar-demo-2">
    <d-avatar name="Avatar" :width="28" :height="28"></d-avatar>
    <d-avatar customText="DevUI" :width="80" :height="80" :isRound="false"></d-avatar>
    <d-avatar imgSrc="/../../assets/logo.svg" :width="100" :height="100" :isRound="false"></d-avatar>
    <d-avatar :name="name" :imgSrc="src" :width="28" :height="28" @load-error="onLoadError"></d-avatar>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const src = ref('123.com/assets/logo.svg');
    const name = ref('Avatar');

    const onLoadError = (e) => {
      console.log(e);
      src.value = '';
    }
    return {
      src,
      name,
      onLoadError
    };
  },
});
</script>

<style>
.avatar-demo-2 {
  display: flex;
  align-items: center;
}
.avatar-demo-2 .devui-avatar {
  margin-right: 10px;
}
</style>

:::

아바타의 특수 표시

아바타 컴포넌트는 몇 가지 특수 상황을 처리해요. 사용자가 존재하지 않거나 기본 아바타를 보여 주는 식이에요. 자세한 규칙은 API를 참고하세요.

:::demo

<template>
  <div class="avatar-demo-3">
    <d-avatar></d-avatar>
    <d-avatar name=""></d-avatar>
  </div>
</template>

<style>
.avatar-demo-3 .devui-avatar {
  margin-right: 10px;
}
</style>

:::

Avatar 파라미터

Avatar 이벤트

기타 설명

아바타 표시 기본 규칙

• 중국어로 시작하는 경우: 넘긴 문자열의 마지막 두 글자를 가져와요

• 영어로 시작하는 경우: 넘긴 문자열의 앞 두 글자를 가져와요

• 여러 영어 이름이 이어진 경우: 넘긴 문자열의 앞 두 영어 이름의 첫 글자를 가져와요

• 중국어·영어 외의 문자로 시작하는 경우: 넘긴 문자열의 앞 두 글자를 가져와요

아바타 특수 표시 규칙

• name, customText, imgSrc를 넘기지 않으면, 이 아바타를 쓰는 사용자가 존재하지 않는 것으로 봐요

• name, customText, imgSrc의 값이 빈 채로 넘어오면, 이 아바타를 쓰는 사용자가 별명이 없는 것으로 보고 기본 아바타를 사용해요

표시 우선순위

imgSrc > customText > name

더 알아보기 (Learn more)

d-avatar는 이미지 로딩 실패 시 글자 기반 아바타로 자연스럽게 대체되는 것이 강점이에요. imgSrc > customText > name 우선순위만 기억하면 어떤 상황에서 어떤 아바타가 그려질지 쉽게 예측할 수 있어요.