Laravel Livewire 表单向导

Laravel

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

Livewire form wizard user form demo

此软件包利用 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

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!