简介

头像组件用于在表格列中展示用户头像或图标，支持多种形状和尺寸配置。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加头像列
  $builder->addColumnAvatar('avatar', '头像');
});

自定义配置

Builder::crud(function($builder) {
  // 使用回调函数自定义配置
  $builder->addColumnAvatar('avatar', '用户头像', function($component) {
    $component->shape('circle'); // 圆形头像
    $component->size('large'); // 大尺寸
    $component->icon('fa fa-user'); // 默认图标
  });
  
  // 使用数组方式配置
  $builder->addColumnAvatar('user_avatar', '头像', [
    'shape' => 'rounded',
    'size' => 'default',
    'defaultAvatar' => 'https://example.com/default.jpg'
  ]);
});

文字头像

Builder::crud(function($builder) {
  $builder->addColumnAvatar('username', '用户', function($component) {
    $component->text('${username}'); // 显示用户名首字母
    $component->shape('circle');
  });
});

组件参数

参数名	类型	默认值	说明
name	string	必填	字段名称，对应数据库字段
label	string	必填	列标题，显示在表格头部
option	callable\|array	[]	配置选项，可以是回调函数或数组

头像组件属性

属性名	类型	默认值	说明
className	string	-	外层 Dom 的类名
style	array	-	外层 Dom 的样式
fit	string	-	图片适应方式，参考 MDN 文档
src	string	-	图片地址
width	int\|string	30	图片宽度（默认30px）
height	int\|string	-	图片高度
defaultAvatar	string	-	占位图
text	string	-	文字内容（用于文字头像）
icon	string	-	图标类名
shape	string	-	形状：'circle'（圆形）、'square'（正方形）、'rounded'（圆角）
size	string	small	尺寸：'default'（48px）、'normal'（40px）、'small'（32px）
gap	string	-	控制字符类型距离左右两侧边界单位像素
alt	string	-	图像无法显示时的替代文本
draggable	string	-	图片是否允许拖动
crossOrigin	string	-	图片的 CORS 属性设置
align	string	center	水平对齐方式（默认居中）
vAlign	string	middle	垂直对齐方式（默认居中）

使用场景

用户头像展示
团队成员列表
商品缩略图
个人资料展示

注意事项

组件会自动设置默认尺寸为 30px
如果没有提供图片地址，会使用字段名动态绑定数据
可以使用 text 或 icon 作为图片加载失败的备选方案
支持三种形状：圆形、正方形、圆角矩形
默认居中对齐显示