Laravel Livewire 表单向导

Laravel Livewire Wizard 是一个 Livewire 组件，它为你提供了一个在保持状态的同时支持多步骤表单的向导。

此软件包利用 WireUI 进行设计以及 TailwindCSS 和 Alpine.js。要使用此包，你需要定义一个向导表单（你可以使用包的 make:livewire 来创建组件）扩展基本向导组件：

namespace App\Http\Livewire;

use Vildanbina\LivewireWizard\WizardComponent;
use App\Models\User;

class UserWizard extends WizardComponent
{
    public array $steps = [
        General::class,
        // 其他步骤...
    ];

    // My custom class property
    public $userId;

    /*
     * 将返回 App\Models\User 实例或创建空用户（基于 $userId 参数）
     */
    public function model()
    {
        return User::findOrNew($this->userId);
    }
}

请注意 $steps 属性，你可以使用它来将表单拆分为多个步骤。每个步骤都有它的状态、验证逻辑、保存逻辑和一个在 UI 中定义步骤名称的标题。

你可以完全控制表单处理，包括在步骤之间导航、重置表单等：

// 重置表格
$wizardFormInstance->resetForm();

// 当你想要拥有当前步骤实例时。你可以使用：
$wizardFormInstance->getCurrentStep();

// 当你想进入特定步骤时。您可以使用：
$wizardFormInstance->setStep($step);

// 或者，你想进行下一步：
$wizardFormInstance->goToNextStep();

// 或者，你想进入上一步：
$wizardFormInstance->goToPrevStep();

步骤支持 Livewire 钩子，用于进入（和退出）步骤、更新状态，以及用于after 状态更新的钩子。

这是一个用于呈现 UserWizard 的示例 Blade 组件：

<livewire:user-wizard user-id="3"/>

你可以通过查看 GitHub 上的 源代码，了解有关表单步骤的设置和挂钩的更多信息。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://laravel-news.com/laravel-livewir...

译文地址：https://learnku.com/laravel/t/66241