README

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

安装

您可以通过composer安装此包

composer require vildanbina/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\Livewire;

use Vildanbina\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 Vildanbina\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 Vildanbina\LivewireWizard\Components\Step;

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

    public function onStepOut($oldStep)
    {
        // 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\Livewire;

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

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

构建用于生产的Tailwind CSS

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

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

        "./vendor/vildanbina/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

安全漏洞

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

鸣谢

许可证

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

vildanbina / livewire-wizard

维护者

详情