README

Form Step

Dcat Admin 分步表单扩展，支持将复杂表单拆分为多个步骤，提升用户填写体验

功能特性

多步骤表单管理，支持任意数量步骤
单步验证，减少服务器请求
数据持久化，刷新页面不丢失数据
自定义完成页面
支持文件上传
响应式 UI 设计

安装

通过 Composer 安装：

composer require dcat-x/form-step

然后在 Dcat Admin 后台启用扩展，或发布资源文件：

php artisan vendor:publish --provider="Dcat\Admin\FormStep\FormStepServiceProvider"

使用方法

基本用法

use Dcat\Admin\Form;

$form = new Form(new User());

$form->multipleSteps(function ($step) {
    // 第一步：基本信息
    $step->add('基本信息', function ($form) {
        $form->text('name', '姓名')->required();
        $form->email('email', '邮箱')->required();
        $form->password('password', '密码')->required();
    });

    // 第二步：详细信息
    $step->add('详细信息', function ($form) {
        $form->text('phone', '电话');
        $form->textarea('address', '地址');
    });

    // 第三步：确认信息
    $step->add('确认', function ($form) {
        $form->textarea('remarks', '备注');
    });
});

return $form;

配置选项

$form->multipleSteps(function ($step) {
    // 添加步骤...

    // 设置容器宽度
    $step->width('1200px');

    // 设置内边距
    $step->padding('30px 20px');

    // 启用数据记忆（刷新页面不丢失）
    $step->remember(true);

    // 选择初始步骤
    $step->select(0);
});

自定义完成页面

$form->multipleSteps(function ($step) {
    // 添加步骤...

    // 自定义完成页面
    $step->done('完成', function ($page) {
        $data = $page->input(); // 获取所有输入数据
        $id = $page->getNewId(); // 获取新创建的记录 ID

        return view('my-completion-page', compact('data', 'id'));
    });
});

步骤事件

$form->multipleSteps(function ($step) {
    $step->add('步骤一', function ($form) {
        $form->text('name');

        // 离开当前步骤时执行
        $form->leaving('console.log("离开步骤一")');

        // 显示当前步骤时执行
        $form->shown('console.log("显示步骤一")');
    });
});

// 全局事件
$step->leaving('console.log("离开步骤", args.index)');
$step->shown('console.log("显示步骤", args.index)');

步骤描述

$step->add('基本信息', function ($form) {
    $form->setDescription('请填写您的基本信息');

    $form->text('name');
    $form->email('email');
});

API 参考

Builder 类

方法	说明
`add($title, $callback)`	添加步骤
`done($title, $callback)`	配置完成页面
`width($width)`	设置容器宽度
`padding($padding)`	设置内边距
`remember($bool)`	启用/禁用数据记忆
`select($index)`	选择初始步骤
`shown($script)`	注册步骤显示事件
`leaving($script)`	注册步骤离开事件
`count()`	获取步骤数量
`all()`	获取所有步骤

Form 类

方法	说明
`setTitle($title)`	设置步骤标题
`setDescription($desc)`	设置步骤描述
`setIndex($index)`	设置步骤索引
`shown($script)`	注册当前步骤显示事件
`leaving($script)`	注册当前步骤离开事件

CompletionPage 类

方法	说明
`title($title)`	获取/设置标题
`contents($content)`	设置页面内容
`input($key, $default)`	获取表单输入数据
`getNewId()`	获取新创建的记录 ID
`form()`	获取表单实例

测试

composer test

代码风格

composer lint

更新日志

请查看 CHANGELOG 了解版本更新信息。

贡献指南

请查看 CONTRIBUTING 了解如何参与贡献。

安全漏洞

如果发现安全漏洞，请查看 SECURITY 了解报告方式。

致谢

许可证

MIT License. 请查看 LICENSE 了解更多信息。

dcat-x / form-step

Maintainers

Details