Easy UI

Appearance

Avatar 头像 ​

以图标、图片或字符的形式展示用户或实体的标识信息。

引入 ​

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

自定义样式 ​

移步到 CSS Part 和 CSS Custom Properties。

基本用法 ​

使用 shape（circle | square）和 size 控制头像的形状与大小。size 支持预设字符串或像素值。

查看代码
html
<div class="row">
  <ea-avatar size="50px"></ea-avatar>
  <ea-avatar size="large"></ea-avatar>
  <ea-avatar size="default"></ea-avatar>
  <ea-avatar size="small"></ea-avatar>
</div>

<div class="row">
  <ea-avatar shape="square" size="50px"></ea-avatar>
  <ea-avatar shape="square" size="large"></ea-avatar>
  <ea-avatar shape="square" size="default"></ea-avatar>
  <ea-avatar shape="square" size="small"></ea-avatar>
</div>

展示类型 ​

支持三种展示类型：图标（icon）、图片（src）和字符（slot）。当 src 和 icon 同时设置时，src 优先。

user
html
<div class="demo">
  <ea-avatar 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） ​

当 src 指定的图片加载失败时，组件会触发 error 事件并显示错误占位图。你可以监听该事件来替换图片、显示文本或其它占位内容。

清空 src 属性时，组件会自动回退到 icon（如果已设置）或默认 slot 内容。

error text
查看代码
html
<div class="demo">
  <ea-avatar id="error" size="60px" src="https://empty"></ea-avatar>
  <ea-avatar id="error-with-text" size="60px" src="https://empty"
    >error text</ea-avatar
  >
</div>
js
const avatar = document.querySelector("#error");
avatar.addEventListener("error", e => {
  console.log("avatar load error", e);
});

适应容器 ​

使用 fit 属性控制图片的 object-fit 行为，支持：fill / contain / cover / none / scale-down。

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

Avatar API ​

Avatar Attributes ​

参数说明类型可选值默认值
icon图标类名string——
size尺寸stringlarge | default | small | 像素值default
shape形状stringcircle | squarecircle
src图片地址string——
src-set图片地址集string——
alt替代文本string——
fit图片适应方式stringfill | contain | cover | none | scale-downcover

Avatar Events ​

事件名说明回调参数(event.detail)
error图片加载失败时触发—

Avatar CSS Part ​

名称说明
container容器元素
img-avatar图片元素
icon-avatar图标元素

Avatar Slots ​

名称说明
default默认插槽

Avatar CSS Custom Properties ​

属性名说明
--ea-avatar-size头像尺寸
--ea-avatar-square-border-radius方形圆角
--ea-avatar-circle-border-radius圆形圆角
--ea-avatar-fit图片适应方式
--ea-avatar-color文字颜色
--ea-avatar-font-size字体大小
--ea-avatar-background-color背景颜色