用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
### 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> 效果示意图: ![](http://ojihaa8pb.bkt.clouddn.com/h-avatar.png)