dcat admin框架grid列表默认只显示一张图片和总数。鼠标移入悬浮层显示图片列表所有图片，移除和点击隐藏

原创

已于 2025-05-16 17:08:27 修改 · 1.1k 阅读

标签

#laravel #php

收录于

于 2025-05-16 17:01:40 首次发布

效果图

第一步：创建自定义 Grid\Column 扩展

新建文件：app/Admin/Extensions/Grid/ImagePreview.php

<?php
namespace App\Admin\Extensions\Grid;

use Dcat\Admin\Admin;
use Dcat\Admin\Grid\Displayers\AbstractDisplayer;

class ImagePreview extends AbstractDisplayer
{
    public function display($config = [])
    {
        $images = is_array($this->value) ? $this->value : json_decode($this->value, true);
        if (empty($images)) return '';

        $first = $images[0];
        $count = count($images);
        $uid = uniqid('img_', false);

        $thumbSize = $config['thumb_size'] ?? 80;
        $popupSize = $config['popup_size'] ?? 80;

        $popupHtml = "<div class='img-popup' id='{$uid}_popup'>";
        foreach ($images as $index => $img) {
            $popupHtml .= "<img src='