### 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>
效果示意圖:
