### HAvatar 组件
介绍: 该组件可以接受两种传值，一种是 `icon`，可以将需要显示 `icon` 的 `type` 传递进来，这样就会自动生成一个水平垂直居中的头像，你可以自定义图标背景，颜色等属性。`icon` 来自 `FontAwesome`，详情请看 `Icon` 组件。第二种生成头像的方式是传入 `src`，指定一个图片的地址即可。
<table>
<caption>HAvatar</caption>
<thead>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</thead>
<tbody>
<tr>
<td>shape</td>
<td>图片的形状，默认为圆形，除 circle 之外的任何值将显示为矩形</td>
<td>String</td>
<td>circle</td>
</tr>
<tr>
<td>icon</td>
<td>图标类型</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>size</td>
<td>头像的大小，该值与图标大小的比例是 1 : 0.618</td>
<td>String | Number</td>
<td>32</td>
</tr>
<tr>
<td>iconcolor</td>
<td>图标的颜色</td>
<td>String</td>
<td>#fff</td>
</tr>
<tr>
<td>bgcolor</td>
<td>背景颜色，因为当使用图标作为头像时，图标并没有占满头像的全部空间</td>
<td>String</td>
<td>#ccc</td>
</tr>
<tr>
<td>src</td>
<td>图片的地址</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>当使用图片作为头像时，绑定 img 的 title 值</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>alt</td>
<td>当使用图片作为头像时，绑定 img 的 alt 值</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<table>
<caption>HAvatar 事件</caption>
<thead>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</thead>
<tbody>
<tr>
<td>onClick</td>
<td>点击时触发</td>
<td>-</td>
</tr>
</tbody>
</table>
示例代码：
<template>
<div class="avatar-container">
<div class="row">
<HAvatar icon="gitlab" size="24" shape="square"></HAvatar>
<HAvatar icon="github" size="32" shape="square"></HAvatar>
<HAvatar icon="google" size="48" shape="square"></HAvatar>
</div>
<div class="row">
<HAvatar icon="gitlab" size="24" bgcolor="#333" iconcolor="#fff"></HAvatar>
<HAvatar icon="github" size="32" bgcolor="#333" iconcolor="#fff"></HAvatar>
<HAvatar icon="google" size="48" bgcolor="#333" iconcolor="#fff"></HAvatar>
</div>
<div class="row">
<HAvatar src="http://ownp5gqo8.bkt.clouddn.com/avatar.png" size="24"></HAvatar>
<HAvatar src="http://ownp5gqo8.bkt.clouddn.com/avatar.png" size="32"></HAvatar>
<HAvatar src="http://ownp5gqo8.bkt.clouddn.com/avatar.png" size="48"></HAvatar>
</div>
</div>
</template>
<script>
import { HAvatar } from 'vuecomponent'
export default {
components: {
HAvatar
}
}
</script>
<style scoped>
.avatar-container {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.row {
width: 240px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
margin-top: 24px;
}
</style>
效果示意图:
