ea-ui

Avatar 头像 ​

用图标、图片或者字符的形式展示用户或事物信息。

引入 ​

js

js
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-avatar/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基本用法 ​

通过 shape 和 size 设置头像的形状和大小。

size 默认为 normal, 可选 large、medium、small。

查看代码 | shape 属性为 circle
html
<div class="row">
  <ea-avatar
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    size="large"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    size="medium"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    size="small"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
</div>
查看代码 | shape 属性为 square
html
<div class="row">
  <ea-avatar
    shape="square"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    shape="square"
    size="large"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    shape="square"
    size="medium"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    shape="square"
    size="small"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
</div>

展示类型 ​

支持三种类型：图标icon、图片src和字符

user
示例代码
html
<div class="row">
  <ea-avatar icon="icon-coffee"></ea-avatar>
  <ea-avatar
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar>user</ea-avatar>
</div>

图片加载失败的 fallback 行为 ​

当展示类型为图片的时候，图片加载失败的 fallback 行为。可以在元素上添加 error 事件来进行后续操作。

查看代码

html

html
<div class="row left">
  <ea-avatar id="error" src="./1.png"></ea-avatar>
</div>

js: error 事件

js
const avatar = document.querySelector("#error");
avatar.addEventListener("error", (e) => {
  console.log(e);
});

图片如何适应容器框 ​

当展示类型为图片的时候，使用 fit 属性定义图片如何适应容器框，同原生 MDN: object-fit。

查看代码
html
<div class="row">
  <ea-avatar
    fit="fill"
    shape="square"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    fit="contain"
    shape="square"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    fit="cover"
    shape="square"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    fit="none"
    shape="square"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
  <ea-avatar
    fit="scale-down"
    shape="square"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-avatar>
</div>

Attributes ​

参数说明类型可选值默认值
size尺寸stringnormal / large / medium / smallnormal
src图片string--
shape形状stringcircle / squarecircle
icon图标string--

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
containeravatar 外层容器
avatar图片外层容器(适用于类型为 icon 与 字符 的情况)

Event ​

事件名说明回调参数
error图片加载失败-