简介

图片组件用于在表格列中展示单张图片，支持预览、缩放等功能。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

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

自定义配置

Builder::crud(function($builder) {
  // 使用回调函数自定义配置
  $builder->addColumnImage('cover', '封面图', function($component) {
    $component->width(60);
    $component->height(60);
    $component->enlargeAble(true); // 支持点击放大
    $component->thumbMode('cover'); // 缩略图模式
  });
  
  // 使用数组方式配置
  $builder->addColumnImage('product_img', '产品图', [
    'width' => 80,
    'height' => 80,
    'enlargeAble' => true,
    'thumbRatio' => '1:1'
  ]);
});

组件参数

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

图片组件属性

属性名	类型	默认值	说明
className	string	-	外层 CSS 类名
imageClassName	string	-	图片 CSS 类名
thumbClassName	string	-	图片缩略图 CSS 类名
height	string	30	图片高度（默认30px）
width	string	30	图片宽度（默认30px）
title	string	-	标题
imageCaption	string	-	描述
placeholder	string	-	占位文本
defaultImage	string	-	无数据时显示的图片
src	string	-	缩略图地址
href	string	-	外部链接地址
originalSrc	string	-	原图地址
enlargeAble	bool	-	支持放大预览
enlargeTitle	string	-	放大预览的标题
enlargeCaption	string	-	放大预览的描述
enlargeWithGallary	string	-	表格中图片放大功能是否展示所有图片信息
thumbMode	string	cover	预览图模式：'w-full'、'h-full'、'contain'、'cover'
thumbRatio	string	4:6	预览图比例：'1:1'、'4:3'、'16:9'
imageMode	string	-	图片展示模式：'thumb'（缩略图）、'original'（原图）
showToolbar	string	-	放大模式下是否展示图片的工具栏
toolbarActions	array	-	图片工具栏，支持旋转、缩放
maxScale	string	-	调整图片比例动作时的最大百分比
minScale	string	-	调整图片比例动作时的最小百分比
align	string	center	水平对齐方式（默认居中）
vAlign	string	middle	垂直对齐方式（默认居中）

使用场景

商品图片展示
用户头像展示
封面图展示
证件照片展示

注意事项

组件默认设置宽高为 30px
默认居中对齐显示
thumbMode 为 'cover' 表示图片会铺满容器
thumbRatio 为 '4:6' 定义了图片的宽高比例
建议开启 enlargeAble 以支持图片预览功能