hare-ui

Appearance

Return to top
On this page

Avatar 头像

显示用户头像的组件。

示例

头像MYAA1A
基本使用
<template>
  <div class="avatar-demo-1">
    <h-avatar style="text-align: right" gender="Female" name="组件头像"></h-avatar>
    <h-avatar name="MyAvatar"></h-avatar>
    <h-avatar name="Avatar1 Avatar2"></h-avatar>
    <h-avatar name="1Avatar"></h-avatar>
  </div>
</template>

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

何时使用

当需要显示用户头像时。

头像显示的基本规则

头像组件传入'name'属性时，会根据一定的规则显示头像的字段，具体规则参见 API。

头像MYAA1A
基本使用
<template>
  <div class="avatar-demo-1">
    <h-avatar style="text-align: right" gender="Female" name="组件头像"></h-avatar>
    <h-avatar name="MyAvatar"></h-avatar>
    <h-avatar name="Avatar1 Avatar2"></h-avatar>
    <h-avatar name="1Avatar"></h-avatar>
  </div>
</template>

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

头像的基础配置

头像组件可设置宽度，高度，是否为圆形头像，同时可自定义头像的显示字段，传入自定义图片等。

demo

AHareUI
基本使用
<template>
  <div class="avatar-demo-2">
    <h-avatar name="Avatar" :width="28" :height="28"></h-avatar>
    <h-avatar customText="HareUI" :width="80" :height="80" :isRound="false"></h-avatar>
    <h-avatar imgSrc="/../../assets/logo.svg" :width="100" :height="100" :isRound="false"></h-avatar>
  </div>
</template>

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

头像的特殊显示

头像组件会对一些特殊情况进行处理，具体表现为用户不存在或展示默认头像，详细规则参见 API。

基本使用
<template>
  <div class="avatar-demo-3">
    <h-avatar></h-avatar>
    <h-avatar name=""></h-avatar>
  </div>
</template>

<style>
.avatar-demo-3 .h-avatar {
  margin-right: 10px;

}
</style>

Avatar 参数

参数名类型默认值描述跳转 Demo
namestring--必选，传入字符串用于制作头像头像显示的基本规则
genderstring | male | female--可选，根据性别区分头像颜色，传入 string，
可以是female | male的任意大小写形式		头像显示的基本规则
widthnumber40可选，设定头像的宽度， 单位为px头像的基础配置
heightnumber40可选，设定头像的高度，单位为px头像的基础配置
is-roundbooleantrue可选，是否显示为圆形头像头像的基础配置
img-srcstring--可选，传入自定义图片作为头像头像的基础配置
custom-textstring--可选，传入自定义显示文字头像的基础配置

其他说明

头像显示基本规则

  • 中文开头：取传入字符串的最后两个字符

  • 英文开头：取传入字符串的前面两个字符

  • 多个英文名连用：取传入字符串的前两个英文名首字母

  • 非中英文开头：取传入字符串的前两个字符

头像特殊显示规则

  • 未传入name，customText，imgSrc，视为使用该头像的用户不存在

  • 传入name，customText，imgSrc的值为空，视为使用该头像的用户无昵称，使用默认头像

显示优先级排序

imgSrc > customText > name