Avatar头像组件

2024-06-19 09:05:57首发，5小时前更新

AX-AVATAR标签不仅仅可以创建带图片的头像，还可以创建以文字代替图片的头像；avatar标签支持theme、tips、size和shape等属性。

前言

avatar头像组件整合了与头像相关的元素，例如图片、提示文本、徽章等。

---

简单使用

组件的src属性是核心属性，该属性通常为图片地址。创建src属性的方法有两种：

1. 对元素使用src属性；
2. 直接在元素内部添加文本；

文字头像

如果头像图片未知，可使用type=text属性让头像以纯文本形式呈现，此时src属性填写纯文本。

尺寸

通过size设置头像尺寸，可设置值如下：

• xxs：宽高2.2rem
• xs：宽高2.8rem
• sm：宽高3.8rem
• md：宽高2.8*2rem
• lg：宽高2.8*3rem
• xl：宽高2.8*4rem
• xxl：宽高2.8*5rem

Attributes属性

ax-avatar为自定义标签，其包含的属性如下：

名称	可选值	默认值	说明
type	'text'/'image'	'image'	头像类型，默认image图片类型，可选择text纯文本类型
theme	'prim[-lt]'/'error[-lt]'/'succ[-lt]'/'info[-lt]'/ 'warn[-lt]'/'issue[-lt]'/'text[-lt]'	undefined	主题颜色，对type=text类型有效，使用lt后缀表示浅色背景
tips	任意HTML文本	undefined	使用遮罩和提示文本，为空则不会显示
shape	'radius'/'square'/'round'	'radius'	外型轮廓，默认小圆角，可选择square方或round圆形
badge	任意纯文本	undefined	是否使用小点徽章，默认不启用
disabled	''/undefined	undefined	是否禁用（不能点击）
arrow	'outside'/'inside'/''/undefined	'outside'	是否使用指示箭头，ouside表示以定位的方式脱离头像，inside是以内容的形式插入头像后方
src	''/undefined	-	头像图片或文本
href	-	undefined	头像的超链接
target	'_blank'/'_self'/'undefined'	undefined	超链接的打开方式
rel	'nofollow'/'canonical‌'/'ugc'	undefined	超链接的rel属性

Methods方法

有组件通用的内置方法：

• set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
• reset：重置组件属性，无参数
• clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

• connected：组件连接成功，无参数
• disconnected：组件断开连接，无参数
• adopted：组件被转移，无参数
• set：设置了属性，支持一个参数即设置的值
• cleared：清除了属性，无参数
• reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});