# Avatar 头像
# 属性对比（只显示有差异的）
| 参数 | WinDesign | Element-ui |
|---|---|---|
| name | ||
| src | ||
| 三维头像包 |
# 代码演示
# 内置头像集
组件库内置了一部分头像，根据性别、年龄以及配色方案等进行设计。开发者可以根据业务需求，进行选择使用。
// 二维头像使用方法
// main.js 入口文件
import 'win-design/lib/themes/fonts/avatars.js'
1
2
3
2
3
// 三维头像使用方法
// 请先下载图片包，通过src指定资源地址
<w-avatar class="w-avatar--specific" :src="avatarUrl"></w-avatar>
1
2
3
2
3
# API
# Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| alt | 描述图像的替换文本 | String | ||
| fit | 当展示类型为图片的时候，设置图片如何适应容器框 | String | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 'cover' |
| icon | 设置头像的图标类型，参考 Icon 组件 | String | ||
| name | 内置头像名称 | String | ||
| shape | 设置头像的形状 | String | 'circle' | 'square' | 'circle' |
| size | 设置头像的大小 | Number | String | number | 'large' | 'medium' | 'small' | 'large' |
| src | 图片头像的资源地址 | String | ||
| src-set | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 | String |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| error | 图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为 | (e: Event) |
# Slot
| 名称 | 说明 |
|---|---|
| default | 自定义头像展示内容 |