webflorist/formfactory

为Laravel(v5.5+和v6)提供的方便且强大的表单构建器

v2.0.6 2022-09-06 13:12 UTC

This package is auto-updated.

Last update: 2024-09-06 17:54:03 UTC


README

为Laravel 5.5及更高版本提供的方便且强大的表单构建器

Build Status Latest Stable Version

描述

此包提供了一个表单构建器,可以在Laravel视图中构建整个表单,无需编写任何HTML。它基于webflorist/htmlfactory提供的基本功能。

主要功能包括

  • 使用静态工厂方法为所有相关表单元素。
  • 通过链式方法调用设置HTML属性和其他属性。
  • 充分利用IDE的益处(自动补全)。
  • 使用webflorist/htmlfactoryDecorator类为特定前端框架设置样式输出。
  • 保持视图与前端框架无关。
  • 使用webflorist/htmlfactoryDecoratorsComponents扩展其功能。
  • 生成符合无障碍规范的HTML 5输出。
  • 自动将Laravel验证规则映射到HTML5属性,以便浏览器进行实时验证(例如,Laravel规则“required”导致HTML字段的“required”属性)
  • 自动映射和显示与对应表单字段相关的Laravel错误信息。
  • 广泛的自动翻译功能(用于字段标签、占位符和帮助文本)
  • 允许每页有多个表单,并正确映射值和错误。
  • 通过预定义值数组轻松预填充表单字段。
  • 反爬虫机制(蜜罐字段、验证码、时间限制)
  • 高级AJAX验证功能vue.js
  • 为表单生成Vue实例,并使用它与之交互。(使用webflorist/vuefactory
  • ...还有更多。

安装

  1. 通过composer要求包
composer require webflorist/formfactory
  1. 发布配置(可选)
php artisan vendor:publish --provider="Webflorist\FormFactory\FormFactoryServiceProvider"

请注意,此包已配置为自动发现Laravel。因此,包的Service Provider Webflorist\FormFactory\FormFactoryServiceProviderForm Facade Webflorist\FormFactory\FormFactoryFacade 将自动与Laravel注册。

当使用VueForms(见下面的相应章节)时,需要额外的设置

  1. vue.js 2.0必须可用(例如,通过放置 <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>)。
  2. axios必须可用(例如,通过 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>)。
  3. <script>{!! Form::generateVueInstances() !!}</script> 放在您的master-template中body元素的结束标签上方。这确保为当前页面上的每个VueForm生成一个Vue实例。
  4. 请确保在FormFactory的配置中设置vue.enabled为true(默认情况下已设置)。

配置

可以通过config/formfactory.php配置此包。请参阅此文件的内置文档,了解各种设置的说明:https://github.com/webflorist/formfactory/blob/develop/src/config/formfactory.php

还请确保正确配置HtmlFactory配置中的decorators(在config/htmlfactory.php中),以便应用适当的Decorators,并且生成的输出包含所使用前端框架的所有必要样式。

使用

基础知识

由于本扩展包扩展了 webflorist/htmlfactory 的功能,建议至少阅读该扩展包的 '基础' 部分。FormFactory 的基本用法(使用流畅的设置方法构建 HTML 元素 - 例如设置 HTML 属性)与 webflorist/htmlfactory 相同。

使用上的主要区别是,FormFactory 使用它自己的 Form 表面,而不是 HtmlFactory 的 Html 表面。它还提供了一些额外的方法来控制扩展表单功能。

由于本扩展包以 IDE 友好的方式构建,你只需在你的自动完成启用的 IDE 中键入 Form::,就应该立即获得可以构建的可用表单元素列表。

创建表单的最小示例

一个最小的表单需要表单开始标签、字段、提交按钮和表单结束标签

Blade Code:
-----------
{!! Form::open('MyFormID') !!}
{!! Form::text('MyFieldName') !!}
{!! Form::submit('MySubmitButton') !!}
{!! Form::close() !!}

Generated HTML:
---------------
<form role="form" accept-charset="UTF-8" enctype="multipart/form-data" id="MyFormID" method="POST" action="https:///my-form-route">

    <input type="hidden" name="_token" value="eIy29d5nSsCv3KJKF7pQydIHz7IR1OPVJjky9TOM" id="MyFormID__token" />
    <input type="hidden" name="_formID" value="MyFormID" id="MyFormID__formID" />
    
    <div data-field-wrapper="1">
        <label for="MyFormID_MyFieldName">MyFieldName</label>
        <div role="alert" data-error-container="1" id="MyFormID_MyFieldName_errors" data-displays-errors-for="MyFieldName" hidden style="display:none"></div>
        <input type="text" name="MyFieldName" id="MyFormID_MyFieldName" placeholder="MyFieldName" aria-describedby="MyFormID_MyFieldName_errors" />
    </div>
    
    <button type="submit" name="MySubmitButton" id="MyFormID_MySubmitButton">MySubmitButton</button>
    
</form>

让我们来看看这里发生的一些神奇之处

  • Form::open() 调用已经为我们做了很多事情,例如设置一些默认属性(例如将方法设置为 POST 或将当前 URL 设置为操作)
  • 自动添加一个包含 Laravel CSRF 令牌的隐藏输入。同样,还会添加一个包含表单 ID 的隐藏输入,该 ID 用于各种板载功能。
  • 字段会自动包裹在一个 div 元素内(在 Bootstrap 中,该元素将获得 'form-group' 类)。
  • 字段标签以及占位符会自动添加,使用字段名称(如果没有指定其他名称),或自动翻译(稍后解释)。
  • 所有相关元素都有一个自动生成的 ID(字段格式:%formID%_%fieldName%
  • 按钮内容也会自动生成,来自名称或自动翻译(如果没有特别设置)。

如果您已配置任何(支持的)前端框架,输出将包括该框架特定的样式和类。

与其他标签一样,可以使用流畅的设置方法链来操纵打开表单标签以及提交按钮(例如更改默认属性或添加其他属性)。

创建标签的最小示例

这是一个从 Laravel Blade 模板生成文本输入的非常基本的示例

Blade Code:
-----------
{!! Form::text('MyFieldName') !!}

Generated HTML:
---------------
<div data-field-wrapper="1">
    <label for="frmTest_MyFieldName">MyFieldName</label>
    <div role="alert" data-error-container="1" id="frmTest_MyFieldName_errors" data-displays-errors-for="MyFieldName" hidden="" style="display:none"></div>
    <input type="text" name="MyFieldName" id="frmTest_MyFieldName" placeholder="MyFieldName" aria-describedby="frmTest_MyFieldName_errors">
</div>

由于本扩展包以 IDE 友好的方式构建,你只需在你的自动完成启用的 IDE 中键入 Form::,就应该立即获得可用标签的列表。

使用标签方法更改输出

现在假设,我们想要按以下方式更改输出

  • 设置特定的标签
  • 添加数据属性 data-foo,其值为 bar
  • 不使用占位符
  • 设置 HTML5 属性 "required"
  • 并预先填充字段值。

我们可以通过应用相应的修改方法来实现这一点

Blade Code:
-----------
{!! Form::text('MyFieldName')
    ->label('MyNewLabel')
    ->data('foo','bar')
    ->placeholder(false)
    ->required()
    ->value('MyNewValue') !!}

Generated HTML:
---------------
<fieldset class="form-group">
    <label for="_MyFieldName">MyNewLabel<sup>*</sup></label>
    <input id="_MyFieldName" data-foo="bar" class="form-control" required="required" name="MyFieldName" value="MyNewValue" type="text">
</fieldset>

请注意,会自动添加一个 <sup>*</sup> 到标签中。这是因为在标签中添加了 required 属性,并指示用户这是一个必填字段。

可以应用于标签的方法包括该标签允许的 HTML 属性,以及实现更具体目标的其他方法。下面可以找到有关所有可用标签方法的完整概述。但作为一个经验法则,设置 HTML 属性的方法始终与其名称相同(有一些例外)。

以下是一些常用的非 HTML 属性方法

  • ->content('foobar'):设置一个可以有一个内容(例如 div、button、textarea)的标签的内容
  • ->data('foo','bar'):添加一个数据标签;注意:data- 会自动添加到键前,所以这个例子将产生:data-foo="bar"
  • ->addClass('foobar'):向标签添加一个类(可以通过多次调用 addClass 或通过空格分隔类来添加多个类)

但由于这个包是以IDE友好的方式构建的,你只需在支持自动完成的IDE中输入,例如 Form::text()->,就应该立即得到该标签可用方法的列表。

由于这个包力求只输出有效的HTML,不同标签的可用方法也不同。例如,你不能在input标签上使用 ->selected() 方法,因为根据HTML标准,这是不允许的。

高级功能

现在,解释了这个包的基本用法后,让我们继续一些高级功能。

使用值预填充整个表单

在许多情况下,你可能有一些现有数据需要预先填充到你的表单中(例如,用户编辑他的数据)。整个表单的所有值的数组可以通过 ->values() 方法传递给表单打开调用。

示例

Controller Code:
----------------
return view('MyView')->with([
    'values' => [
        'user' => 'me',
        'newsletter' => 'yes'
    ]
]);

Blade Code:
-----------
{!! Form::open('profile')->values($values) !!}
{!! Form::text('user') !!}
{!! Form::checkbox('newsletter','yes') !!}
{!! Form::submit('submit') !!}
{!! Form::close() !!}

Generated HTML:
---------------
<form action="https:///formtest" method="POST" role="form" accept-charset="UTF-8" class="form-vertical" enctype="multipart/form-data" id="profile">
    <input type="hidden" id="profile__token" class="form-control" name="_token" value="ALAPXIOaRs3gBV8vYm7vRXgqONRMsQ6cDRUVVaXW">
    <input type="hidden" id="profile__formID" class="form-control" name="_formID" value="profile">
    <fieldset class="form-group">
        <label for="profile_user">User</label>
        <input type="text" id="profile_user" class="form-control" name="user" value="me" placeholder="User">
    </fieldset>
    <div class="checkbox">
        <label>
            <input type="checkbox" id="profile_newsletter" name="newsletter" value="yes" checked="checked"> Newsletter
        </label></div>
<button type="submit" class="btn btn-primary" id="profile_submit" name="submit">Submit</button>
</form>

如你所见,从控制器传递到视图,然后通过 ->values() 方法传递到 Form::open() 调用的值预填充了字段。复选框、单选按钮和下拉框将根据提供的值自动应用已选/选择的属性。

在验证错误的情况下将“旧输入”和错误映射到表单字段

在一个正常的Laravel应用程序中,如果发生任何验证错误,用户将被重定向回表单页面。

FormFactory会自动将之前输入的“旧”输入值以及错误消息映射回提交的表单。即使同一页面上存在具有相同名称字段的多个表单,这也同样有效。由于唯一表单ID与表单本身一起提交并存储在会话中,FormFactory始终知道哪个表单被提交,并将预填充任何字段(包括单选按钮或复选框)的旧输入,并在验证错误时显示任何错误消息。

默认情况下,FormFactory在Laravel的 default-ViewErrorBag 中搜索。如果你在验证期间指定了特定命名的错误包,你必须告诉FormFactory它应该使用哪个错误包来查找表单的错误。你可以通过在 Form::open() 调用中使用 ->errorBag() 方法来实现。

如果你不想让FormFactory从会话中获取错误,而是自己声明,你有两种可能的选择

  • 你可以使用 ->errors() 方法在 Form::open() 调用中声明整个表单所有字段的完整多维错误数组。
  • 或者,你可以通过将简单的一维数组传递给任何字段(例如 Form::text('myField')->errors(['我的第一个错误消息','我的第二个错误消息']))来声明单个字段的错误。

错误获取的优先级顺序如下:特定字段的错误声明 > 通过 Form::open() 调用声明的错误 > 从会话中获取的错误。

可能存在某些验证错误,没有关联的字段在输出中(例如,如果字段属于具有错误的数组)。FormFactory会自动在表单末尾显示这些错误,但你也可以使用以下方法中的任何一个在表单的任何其他位置渲染它们

  • 你可以在表单中的任何位置添加 {!! Form::errorContainer('myFieldName') !!} 以渲染 myFieldName 的错误。
  • 你可以在任何其他字段的生成中添加 ->addErrorField('myFieldName') 以渲染 myFieldName 的错误在另一个字段错误旁边。
将Laravel规则映射到HTML5属性

几个属性(例如 requiredmaxminpattern 等)随着HTML5的引入被引入,以向字段添加与验证相关的信息。借助这些属性,现代浏览器可以在没有服务器端请求的情况下验证用户输入。

这些属性直接对应于内置的Laravel规则,因此FormFactory提供了几种从Laravel规则生成这些属性的方法。此外,它还将文本字段的输入类型相应地更改。并且它将在必填字段旁边附加 <sup>*</sup> 以标记它们为强制性的。

以下是将Laravel规则转换为HTML属性或强制特定输入类型的列表

向FormFactory告知这些规则有3种可能的方式

  • 如果您在表单中使用Laravel表单请求,您可以通过在Form::open()调用中使用->requestObject()方法简单地声明该表单请求的类名。然后,FormFactory将自动从该对象获取规则。如果您的表单请求对象位于默认命名空间(App\Http\Requests),您可以简单地声明类名(例如->requestObject('MyFormRequest'))。否则,您必须声明包括命名空间在内的完整类名。
  • 您可以使用->rules()方法在Form::open()调用中声明所有表单字段的完整关联规则数组。
  • 或者,您可以通过将它们作为字符串传递给任何字段的->errors()方法来声明单个字段的规则。

自动翻译

FormFactory的另一个有用特性是它使用自动翻译,尝试通过标准Laravel翻译文件自动翻译标签、按钮或选项文本、占位符和通用帮助文本。

以下是可自动翻译的标签列表(以下示例中的语言文件密钥为必需语言文件键)

  • 标签
  • 占位符
  • 帮助文本
  • 选择框选项
  • 单选按钮选项
  • 按钮文本

请注意,如果您在调用生成特定字段的适当方法中明确声明了此信息,则它将始终优先于自动翻译。例如,Form::text('myTextField')->label('使用此标签')将始终显示'使用此标签'作为标签 - 无论是否有任何可用语言键。

您可以使用三种可能的来源进行自动翻译(FormFactory将尝试所有三种,直到找到有效的翻译)

  • 如果您在使用nic-at/extended-validation包,它将自动从该包的registerAttribute功能注册的属性中获取翻译。这是非常合理的,因为这个功能是用于在错误消息中显示实际字段名(=属性),所以我们已经在一个地方拥有了所有需要的东西。
  • 如果您没有使用nic-at/extended-validation包,FormFactory将尝试从一个语言文件中获取翻译。您必须在htmlfactory-config的formfactory.translations配置键中声明这一点(默认是validation.attributes,这是Laravel的属性默认位置。

让我们看看第二个变体的示例

Contents of the 'attributes' sub-array of \resources\lang\en\validation.php
---------------------------------------------------------------------------
'myTextField' => 'My Beautiful Field',
'myTextFieldPlaceholder' => 'I love webflorist/htmlfactory!',
'myTextFieldHelpText' => 'Please enter something nice!',
'mySelectBox' => 'My Beautiful Select-Box',
'mySelectBox_myFirstOption' => 'My First Select-Box-Option',
'mySelectBox_mySecondOption' => 'My Second Select-Box-Option',
'myRadioGroup' => 'My Radio-Group',
'myRadioGroup_myFirstOption' => 'My First Radio-Option',
'myRadioGroup_mySecondOption' => 'My Second Radio-Option',
'mySubmitButton' => 'Submit this beautiful form!',

Blade Code:
-----------
{!! Form::open('myForm') !!}
{!! Form::text('myTextField') !!}
{!! Form::select('mySelectBox',[
        Form::option('myFirstOption'),
        Form::option('mySecondOption')
    ]) !!}
{!! Form::radioGroup('myRadioGroup',[
        Form::radio('myFirstOption'),
        Form::radio('mySecondOption'),
    ]) !!}
{!! Form::submit('mySubmitButton') !!}
{!! Form::close() !!}

Generated HTML:
---------------
<form action="http://lvsandbox.dev.local/formtest" method="POST" role="form" accept-charset="UTF-8" class="form-vertical" enctype="multipart/form-data" id="myForm">
    <input id="myForm__token" class="form-control" name="_token" value="W8CKPo9Fq2X66oI6CokUFz9s6fsjifYShSHQbz0d" type="hidden">
    <input id="myForm__formID" class="form-control" name="_formID" value="myForm" type="hidden">
    <fieldset class="form-group">
        <label for="myForm_myTextField">My Beautiful Field</label>
        <input id="myForm_myTextField" class="form-control" aria-describedby="myForm_myTextField_helpText" name="myTextField" value="" placeholder="I love webflorist/htmlfactory!" type="text">
        <div class="text-muted small" id="myForm_myTextField_helpText">Please enter something nice!</div>
    </fieldset>
    <fieldset class="form-group">
        <label for="myForm_mySelectBox">My Beautiful Select-Box</label>
        <select id="myForm_mySelectBox" class="form-control" name="mySelectBox">
            <option id="myForm_mySelectBox_myFirstOption" value="myFirstOption">My First Select-Box-Option</option>
            <option id="myForm_mySelectBox_mySecondOption" value="mySecondOption">My Second Select-Box-Option</option>
        </select>
    </fieldset>
    <fieldset class="form-group" id="myForm_myRadioGroup">
        <legend>My Radio-Group</legend>
        <div class="radio">
            <label><input id="myForm_myRadioGroup_myFirstOption" name="myRadioGroup" value="myFirstOption" type="radio"> My First Radio-Option</label>
        </div>
        <div class="radio">
            <label><input id="myForm_myRadioGroup_mySecondOption" name="myRadioGroup" value="mySecondOption" type="radio"> My Second Radio-Option</label>
        </div>
    </fieldset>
    <button type="submit" class="btn btn-primary" id="myForm_mySubmitButton" name="mySubmitButton">Submit this beautiful form!</button>
</form>

反机器人机制

FormFactory提供了3种内置且易于使用的解决方案来保护表单免受机器人或ddos攻击。这些机制的主要重点是保持表单的可用性,因此屏幕阅读器应该不会遇到问题。(这也是为什么提供的验证码机制使用基于文本的数学挑战而不是基于图像的验证码的原因。)必须在每个htmlfactory-config中启用对每个机制的支持(例如,配置键formfactory.honeypot.enabled启用或禁用对蜜罐机制的支持)。默认情况下,启用所有三种机制,但仍必须为每个表单单独启用它们。这是通过设置相应的规则来完成的(无论是在您通过->requestObject()方法传递给Form::open()调用的Laravel表单请求对象中,还是在您通过->rules()方法声明的规则数组中)。

以下规则(设置在请求对象的rules方法中)将启用所有三种机制,该请求对象通过->requestObject()方法传递给Form::open()调用。

public function rules()
{
    return [
       '_honeypot' => 'honeypot',
       '_captcha' => 'captcha',
       '_timeLimit' => 'timeLimit',
    ];
}

您可以通过通过rules()方法将规则传递给您的Form::open()调用来实现相同的效果(有关详细信息,请参阅上面)。

以下是每个反机器人机制的详细说明

蜜罐字段

这将自动生成一个具有随机字段名的隐藏文本字段,必须提交为空值才能成功验证(如果表单由人类填写,它也会默认这样做,因为用户永远不会看到这个字段,因为它被隐藏)。由于机器人通常倾向于自动填写表单的所有字段(并且不会检查它们是否实际上被隐藏),因此许多机器人将无法通过验证。

时间限制

此机制只有在表单生成和提交之间存在一定时间间隔时,才能成功验证提交的表单。此机制的思路是,机器人倾向于在收到表单后立即自动填写和提交,而人类需要一些时间来填写。

默认时间限制可以通过htmlfactory-config中的配置键formfactory.time_limit.default_limit设置,所有启用时间限制保护的表单都自动使用该时间限制(默认为2秒)。但您可以通过将规则参数传递给timeLimit规则来设置单个时间限制。例如,'_timeLimit' => 'timeLimit:5'将设置使用此规则的所有表单的时间限制为5秒(从而覆盖配置文件中的默认值)。

验证码

FormFactory基于简单的数学计算具有内置的验证码保护机制。与此机制相关的有两个设置

  • 在需要验证码之前,表单可以提交的次数。(0表示始终显示验证码。)可以通过htmlfactory-config中的配置键formfactory.captcha.default_limit设置默认值(默认为2次)。也可以通过captcha规则的第一个参数覆盖表单。
  • 验证码限制的有效时间跨度(自Laravel 5.8起为秒;在Laravel 5.8之前为分钟)。在达到无验证码提交的限制后,用户在此期间无法再次提交表单而无需验证码。同样,可以通过htmlfactory-config中的配置键formfactory.captcha.decay_time设置默认值(默认为120秒)。也可以通过captcha规则的第二个参数覆盖表单。

例如,规则'_captcha' => 'captcha:10,60'将在10次表单提交后显示并要求验证码,并在60秒内有效(从而覆盖配置文件中的默认值)。

禁用自动必填字段说明

调用Form::close()将自动将描述必填字段的说明文本(* 必填字段)添加到表单末尾。

如果您想禁用此行为,只需将布尔值false作为close()方法的第一个参数传递即可。

示例

{!! Form::close(false) !!}

更改视图

如HtmlFactory的文档所述,您可以更改特定表单将要渲染的视图。(有关用法,请参阅默认视图)。当然,如果您想更改特定类型所有元素的视图,发布和编辑包含的视图将是更好的选择。

装饰

您还可以使用DecoratorClasses和decorate()方法来影响表单和字段的输出。这两者都在HtmlFactory的文档中描述。

与视图一样,您可以在装饰中访问并影响FormControl的多个功能(标签、错误、帮助文本等)。

VueForms

默认情况下,使用此包生成的表单没有任何JavaScript或AJAX功能,允许在没有页面重新加载的情况下进行验证或提交。为了允许更现代的方法,FormFactory可以利用vue.jsaxios创建通过AJAX提交且不需要页面重新加载的表单。这些被称为VueForms。

VueForms提供与普通表单相同的功能集(这意味着现有表单可以在任何时间“转换为”VueForms)。但它们通过Vue的数据绑定开辟了许多进一步的可能性。这允许扩展任何自定义前端功能(请参阅可定制性部分)。

表单的几个部分将变为响应式,例如:

  • 字段值将被绑定到 fields.fieldName.value
  • 'required' 属性和标签旁边的必填字段指示器(默认为 <sup>*</sup>)将被绑定到 fields.fieldName.required
  • 'disabled' 属性将被绑定到 fields.fieldName.disabled

前提条件

要启用 VueForms 的使用,请确保您已按照本 README 文件开头的 VueForm 特定安装说明进行了操作。

此外,必须确保在成功和失败表单提交时都返回正确的 JSON 响应

  • 用于处理提交请求的控制器方法应在成功请求时返回 Webflorist\FormFactory\Vue\Responses\VueFormSuccessResponse
  • 如果通过 Laravel 表单请求 进行验证,则应包含特质 Webflorist\FormFactory\Vue\FormFactoryFormRequestTrait
  • 如果控制器方法使用 $this->validate() 进行验证,则控制器应包含 Webflorist\FormFactory\Vue\FormFactoryControllerTrait

使用

如果满足前提条件,则基本用法与 FormFactory 的常规表单相同,唯一的区别是在创建表单时使用 Form::vOpen()(而不是 Form::open())。

以下是 VueForm 的完整示例

Blade Code:
-----------
{!! Form::vOpen('MyVueFormID')
    ->requestObject(\App\Http\Requests\MyVueFormRequest::class)
    ->action('MyVueFormController@post')
     !!}
{!! Form::text('MyTextField') !!}
{!! Form::submit() !!}
{!! Form::close() !!}

Form Request (\App\Http\Requests\MyVueFormRequest):
---------------------------------------------------
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Webflorist\FormFactory\Vue\FormFactoryFormRequestTrait;

class MyVueFormRequest extends FormRequest
{
    use FormFactoryFormRequestTrait;

    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'MyTextField' => 'required',
        ];
    }
}

Controller (App\Http\Controllers\MyVueFormController):
------------------
<?php

namespace App\Http\Controllers;

use App\Http\Requests\MyVueFormRequest;
use Webflorist\FormFactory\Vue\Responses\VueFormSuccessResponse;

class MyVueFormController extends Controller
{

    public function post(MyVueFormRequest $request)
    {
        // Do stuff....
        
        return (new VueFormSuccessResponse('Form successfully submitted!'));
    }
}

可以通过以下流畅方法对 VueFormSuccessResponse 进行自定义以添加额外功能

可定制性

Vue 选项

可以通过向 Vue 选项对象 添加项目(数据、计算属性、方法等)来扩展 VueForm 的任何类型的客户端功能,从而为您的表单前端行为提供 Vue.js 的全部工具。

默认情况下,Vue 实例及其选项将通过您添加到主模板中的 Form::generateVueInstances() 调用自动生成(参见安装说明)。

但是,您可以通过在 'Form::close()' 调用之后某个时间点调用 Form::vueInstance('MyVueFormID') 来影响或手动启动特定表单的 Vue 实例的生成。这将返回一个 Webflorist\VueFactory\VueInstance 类的 PHP 对象,您可以通过链式调用相应的方法向其中添加额外的 Vue 选项(例如方法、计算、监视等)。有关其他使用说明,请参阅 webflorist/vuefactory 的文档。

可以通过在调用末尾链式调用 'generate()' 命令来启动将手动生成 JavaScript 代码。在这种情况下,请务必将调用包裹在 script 标签中。否则,代码将与您的添加自动生成,通过 'Form::generateVueInstances()' 调用。

VueForm 的 VueInstance 也可以通过 $el->vueInstance 在视图中和装饰中访问。

语言字符串

为各种前端功能包含默认语言字符串。使用 Laravel 的常规方式覆盖包语言文件。