element-ui avatar 组件源码分享

 今日简单分享 avatar 组件的源码实现，主要从以下四个方面：

1、avatar 组件页面结构

2、avatar 组件属性

3、avatar 组件事件

4、avatar 组件 slot

一、avatar 组件页面结构

二、avatar 组件属性

2.1 icon 属性，设置头像的图标类型，参考 Icon 组件，类型 string，无默认值。

组件使用及展示效果如下：

2.2 size 属性，设置头像的大小，类型 number/string，number / large / medium / small，默认 large。

2.3 shape 属性，设置头像的形状，类型 string，circle / square，默认 circle。

2.4 src 属性，图片头像的资源地址，类型 string，无默认值。

2.5 srcSet 属性，以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像，类型 string，无默认值。

srcSet 作用是：针对于不同的屏幕设置不同尺寸的图片。

参考链接：<img>：图像嵌入元素 - HTML（超文本标记语言） | MDN

2.6 alt 属性，描述图像的替换文本，类型 string，无默认值。

2.7 fit 属性，当展示类型为图片的时候，设置图片如何适应容器框，类型 string，fill / contain / cover / none / scale-down，默认 cover。

图片 object-fit 参考链接：object-fit - CSS：层叠样式表 | MDN

三、avatar 组件事件

3.1 error 事件，图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为，回调参数 (e: Event)。

使用及展示效果：

四、avatar 组件 slot

4.1 default 挂载，自定义头像展示内容。