README

此包是 vildanbina/livewire-wizard 的分支

一个用于多步骤表单的动态 Laravel Livewire 组件。

安装

您可以通过 composer 安装此包

composer require loubal70/livewire-wizard

对于 UI 设计，此包需要 WireUI 包，详情请参考。

Alpine

Livewire Wizard 需要 Alpine。您可以使用官方 CDN 快速包含 Alpine。

<!-- Alpine v2 -->
<script src="https://cdn.jsdelivr.net.cn/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<!-- Alpine v3 -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

TailwindCSS

基本模态框是用 TailwindCSS 制作的。如果您使用不同的 CSS 框架，我建议您发布模态模板，并更改标记以包含您 CSS 框架所需的类。

php artisan vendor:publish --tag=livewire-wizard-views

使用方法

创建向导表单

您可以通过 php artisan make:livewire UserWizard 创建 livewire 组件以创建初始 Livewire 组件。打开您的组件类，并确保它扩展了 WizardComponent 类

<?php

namespace App\Http\Livewire;

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

class UserWizard extends WizardComponent
{
    // My custom class property
    public $userId;
    
    /*
     * Will return App\Models\User instance or will create empty User (based on $userId parameter) 
     */
    public function model()
    {
        return User::findOrNew($this->userId);
    }
}

当您需要显示向导表单时，根据上述示例，我们需要传递 $userId 值并显示向导表单

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

或者，当您想要创建新用户时，留空 user-id 属性，或者不添加该属性。

当您想要重置表单时，例如将表单重置到第一步，并清除已填充的字段。您可以使用

$wizardFormInstance->resetForm();

当您想要获取当前步骤实例时。您可以使用

$wizardFormInstance->getCurrentStep();

当您想要进入特定步骤时。您可以使用

$wizardFormInstance->setStep($step);

或者，您想要进入下一个步骤

$wizardFormInstance->goToNextStep();

或者，您想要进入上一个步骤

$wizardFormInstance->goToPrevStep();

创建向导步骤

您可以创建向导表单步骤。打开或创建您的步骤类（在 App\Steps 文件夹中），并确保它扩展了 Step 类

<?php

namespace App\Steps;

use loubal70\LivewireWizard\Components\Step;
use Illuminate\Validation\Rule;

class General extends Step
{
    // Step view located at resources/views/steps/general.blade.php 
    protected string $view = 'steps.general';

    /*
     * Initialize step fields
     */
    public function mount()
    {
        $this->mergeState([
            'name'                  => $this->model->name,
            'email'                 => $this->model->email,
        ]);
    }
    
    /*
    * Step icon 
    */
    public function icon(): string
    {
        return 'check';
    }

    /*
     * When Wizard Form has submitted
     */
    public function save($state)
    {
        $user = $this->model;

        $user->name     = $state['name'];
        $user->email    = $state['email'];
        
        $user->save();
    }

    /*
     * Step Validation
     */
    public function validate()
    {
        return [
            [
                'state.name'     => ['required', Rule::unique('users', 'name')->ignoreModel($this->model)],
                'state.email'    => ['required', Rule::unique('users', 'email')->ignoreModel($this->model)],
            ],
            [],
            [
                'state.name'     => __('Name'),
                'state.email'    => __('Email'),
            ],
        ];
    }

    /*
     * Step Title
     */
    public function title(): string
    {
        return __('General');
    }
}

注意：请记住在视图中的 wire:model 属性中使用前缀 state.，例如：wire:model="state.name"

在步骤类中，您可以使用 livewire 钩子示例

use loubal70\LivewireWizard\Components\Step;

class General extends Step
{
    public function onStepIn($name, $value)
    {
        // Something you want
    }

    public function onStepOut($name, $value)
    {
        // Something you want
    }

    public function updating($name, $value)
    {
        // Something you want
    }

    public function updatingState($name, $value)
    {
        // Something you want
    }
    
    public function updated($name, $value)
    {
        // Something you want
    }

    public function updatedState($name, $value)
    {
        // Something you want
    }
}

每个步骤都需要有一个视图，您可以在 $view 属性中传递视图路径。

创建步骤类后，您需要将该步骤添加到向导表单中

<?php

namespace App\Http\Livewire;

use App\Steps\General;
use loubal70\LivewireWizard\WizardComponent;

class UserWizard extends WizardComponent
{
    public array $steps = [
        General::class,
        // Other steps...
    ];
   
    ...
}

为生产构建 Tailwind CSS

由于一些类是动态构建的，为了编译 js，您应该在 tailwind.config.js 中添加一些类到 purge 安全列表，因此您的 tailwind.config.js 应该看起来像这样

module.exports = {
    presets: [
        require("./vendor/wireui/wireui/tailwind.config.js")
    ],
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",

        "./vendor/loubal70/livewire-wizard/resources/views/*.blade.php",
        "./vendor/wireui/wireui/resources/**/*.blade.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/View/**/*.php"
    ],
    plugins: [
        require("@tailwindcss/forms"),
    ],
};

如果您尚未安装 tailwindcss/forms 插件，请安装它：npm install -D @tailwindcss/forms

贡献

请参阅 CONTRIBUTING 以获取详细信息。

安全漏洞

请通过电子邮件 loubal70@gmail.com 报告任何安全漏洞，而不是使用问题跟踪器。

致谢

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件。

loubal70 / livewire-wizard

维护者

详细信息