# Avatar 头像

[toc]

`Avatar` 组件用于展示用户头像，支持图片、字符或微信头像方式展示。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-avatar": "../dist/avatar/index"
  }
}

```

## 用法

### 基础用法

设置 `imageUrl` 属性后，即可展示头像，预设为圆形头像。

```html
<tea-avatar imageUrl="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/avatar.svg"></tea-avatar>
```

### 展示方形头像

通过 `square` 属性设置为方形头像。

```html
<tea-avatar imageUrl="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/avatar.svg" square></tea-avatar>
```

### 设置头像大小

通过 `size` 属性指定头像大小，提供 `sm`、`md`、`lg` 三种尺寸可选用，默认值为 `sm`。

```html
<!-- 小号头像 -->
<tea-avatar imageUrl="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/avatar.svg"></tea-avatar>

<!-- 中号头像 -->
<tea-avatar size="md" imageUrl="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/avatar.svg"></tea-avatar>

<!-- 大号头像 -->
<tea-avatar size="lg" imageUrl="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/avatar.svg"></tea-avatar>
```

### 展示文本头像

通过 `text` 属性来指定头像文本内容。

```html
<tea-avatar text="S"></tea-avatar>
```

### 展示微信头像

通过 `weixinAvatar` 属性来指定显示内容为微信头像。

```html
<tea-avatar weixinAvatar></tea-avatar>
```

### 展示消息提醒

通过 `count` 属性来开启右上角消息提醒，小于等于0、为空时不展示。

```html
<tea-avatar count="7" weixinAvatar></tea-avatar>
```

## Props

| 参数           | 描述                             | 类型        | 默认值     | 可选值                  |
| ------------ | ------------------------------ | --------- | ------- | -------------------- |
| size         | 头像大小                           | `String`  | `sm`    | `['sm', 'md', 'lg']` |
| square       | 是否为方形头像，预设为圆形头像                | `Boolean` | `false` | -                    |
| imageUrl     | 图片地址，为避免头像变形、提供的图片宽高比请尽量保持 1:1 | `String`  | \`\`    | -                    |
| text         | 以文字形式展示头像                      | `String`  | \`\`    | -                    |
| weixinAvatar | 是否使用微信头像                       | `Boolean` | `false` | -                    |
| count        | 消息数，显示在头像右上角                   | `Number`  | \`\`    | -                    |

## Slots

| 名称  | 描述      |
| --- | ------- |
| -   | 自定义显示内容 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                     | 默认值                      | 描述  |
| ----------------------- | ------------------------ | --- |
| avatar-size-sm          | 36px                     | -   |
| avatar-size-md          | 48px                     | -   |
| avatar-size-lg          | 64px                     | -   |
| avatar-text-size        | @font-size-md            | -   |
| avatar-text-color       | @text-base-inverse-color | -   |
| avatar-background-color | @color-gray-2            | -   |
| avatar-border-radius    | @border-radius           | -   |