简介

多图组件用于在表格列中展示多张图片，支持图片集预览和相册功能。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加多图列
  $builder->addColumnImages('images', '图片集');
});

自定义配置

Builder::crud(function($builder) {
  // 使用回调函数自定义配置
  $builder->addColumnImages('gallery', '相册', function($component) {
    $component->width(100);
    $component->enlargeAble(true); // 支持点击放大
    $component->thumbMode('cover'); // 缩略图模式
    $component->delimiter(','); // 分隔符
  });
  
  // 使用数组方式配置
  $builder->addColumnImages('product_images', '产品图集', [
    'width' => 30,
    'enlargeAble' => true,
    'thumbRatio' => '1:1',
    'delimiter' => ','
  ]);
});

组件参数

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

多图组件属性

属性名	类型	默认值	说明
className	string	-	外层 CSS 类名
defaultImage	string	-	默认展示图片
value	string	-	图片数组
source	string	-	数据源
width	string\|int	30	图片宽度（默认30px）
height	string\|int	-	图片高度
delimiter	string	-	分隔符，当 value 为字符串时用该值进行分隔拆分
src	string	-	预览图地址，支持数据映射获取对象中图片变量
originalSrc	string	-	原图地址，支持数据映射获取对象中图片变量
enlargeAble	string	-	支持放大预览
enlargeWithGallary	string	-	放大功能展示图片集的所有图片信息
thumbMode	string	-	预览图模式：'w-full'、'h-full'、'contain'、'cover'
thumbRatio	string	-	预览图比例：'1:1'、'4:3'、'16:9'
showToolbar	string	-	放大模式下是否展示图片的工具栏
toolbarActions	string	-	图片工具栏，支持旋转、缩放，默认操作全部开启

使用场景

商品多图展示
相册集合展示
附件图片列表
证件多图展示

注意事项

组件默认设置宽度为 30px
支持字符串分隔方式存储多图（使用 delimiter 分隔）
也支持数组方式存储图片地址
建议开启 enlargeAble 以支持图片集预览功能
enlargeWithGallary 控制是否在放大时显示所有行的图片