快速创建输入。适用于 Bootstrap 4,但你可以修改模板

v2.1.0 2022-02-14 12:45 UTC

README

已确认在 Laravel 7.0.0、8.0.0 和 8.73.2 项目上工作正常

为个人使用而创建,请随意使用/扩展

QForm for Laravel 执行了大量的 HTML 表单操作,利用 Laravel 组件

  • 使用单个组件创建大多数类型的 HTML 输入
  • 自动获取 old() 值和错误
  • 利用附加函数自动为输入表单名称属性添加前缀
  • 可定制模板
  • 在提供的基 Bootstrap 4 模板中,它尝试提供标签、错误和其他可访问性功能。
<x-qform-input type="text" name="name" title="This is the name input" />
<x-qform-input type="email" name="email" title="This is the email input" />
<x-qform-input type="select" name="level" title="This is the level input" :variables="[0 => 'User', '1' => 'Admin']" int />
  • 输入将根据提供的名称自动查找错误和旧值
  • 输入将根据 @QFormData() 给定的数组或模型或直接从 "data" 属性获取输入值

警告

对于选择和其他变量输入类型,使用严格比较。如果您的输入值是整数,并且在变量数组中声明为整数,您需要设置 "int" 属性,以便在比较之前将其转换为整数

设置

Composer

composer require corbinjurgens/qform

手动安装

将以下内容复制到主 composer.(如果包添加到 packages/corbinjurgens/qform)

 "autoload": {
	"psr-4": {
		"Corbinjurgens\\QForm\\": "packages/corbinjurgens/qform/src"
	},
},

并运行

composer dump-autoload

将以下内容添加到 config/app.php 提供者

Corbinjurgens\QForm\ServiceProvider::class,

在 config/app.php 中添加别名

"QForm" => Corbinjurgens\QForm\Facade::class,

基本用法

直接使用

直接使用组件,并纯粹从模板中受益,模板负责 HTML 和 CSS

简单输入

<x-qform-input type="text" name="name" value="This is text" title="This is the column name" />

// $value = 'This is text';
<x-qform-input type="textarea" name="name1" :value="$value" :title="__('column.text1')" />

// $value = True; In this case the checkbox value will always be 1, and only be checked if value is true
<x-qform-input type="checkbox" name="name2" :value="$value" :title="__('column.text2')" />

数组输入,即具有多个选项的任何内容

如果您的变量键是整数,请确保设置 int 属性,以便可以正确比较值

// $value = 1;
// $variables = [1 => 'Option 1', 2 => 'Option 2', 3 => 'Option 3'];
<x-qform-input type="select" name="name" :value="$value" :title="__('column.text')" :variables="$variables" int />

// $value = 'option1';
// $variables = ['option1' => 'Option 1', 'option2' => 'Option 2', 'option3' => 'Option 3'];
<x-qform-input type="radio" name="name" :value="$value" :title="__('column.text')" :variables="$variables" />

// $value = [1, 2, 3]; If a checkbox has an array given for :variables, it will behave differently and expect :value to also be array
// $variables = [1 => 'Option 1', 2 => 'Option 2', 3 => 'Option 3'];
<x-qform-input type="checkbox" name="name" :value="$value" :title="__('column.text')" :variables="$variables" int />

智能使用

使用 QForm 工具是此包的预期用法

在您的模板中设置目标模型或数组。之后的所有输入都将使用此数据来检索值

@QFormData(['test' => '1', 'test2' => 2])

{{-- The component parses the name property, and gets the 'test' column from the data --}}
<x-qform-input type="text" name="prefix[test]" />

{{-- If the required data column differs from the name, you can specifify it with 'column' --}}
<x-qform-input type="text" name="prefix[test_other]" column="test2"/>

您也可以为每个输入直接设置数据

<x-qform-input :data="['test' => '1', 'test2' => 2]" type="text" name="prefix[test_other]" column="test2"/>

奖励

您可以使用 blade 函数创建输入

@QFormInput(['type' => 'text', 'name' => 'country', 'data' => $user])

这是另一种方法

<x-qform-input type="text" name="country" :data="$user"/>

其他函数

使用前缀函数并传递一个数组(或传递 null 来清除),它将自动前缀输入名称属性

@QFormData($user)

@QFormPrefix(['admin', 'data'])

<x-qform-input type="radio" name="level" :variables="$variables"/>
{{-- the inputs name attribute will be name="admin[data][level]"  --}}

您还可以使用 prefixIn() 和 prefixOut() 添加一组前缀,然后再次退出。可以使用 QForm::prefixReset() 或 @QFormPrefix 无参数来完全清除前缀设置。

@QFormPrefixIn(['admin', 'data'])

<x-qform-input type="radio" name="level" :variables="$variables"/>
{{-- name will be name="admin[data][name]" --}}

<x-qform-input type="text" name="address" />
{{-- name will be name="admin[data][address]" as prefix is retained between inputs--}}

@QFormPrefixIn(['preferences'])

<x-qform-input type="text" name="email" />
{{-- name will be name="admin[data][preferences][email]" --}}

@QFormPrefixOut()

<x-qform-input type="text" name="dob" />
{{-- name will be name="admin[data][dob]" so we have gone back to the previous prefix config --}}

定制模板

通过以下方式发布视图

php artisan vendor:publish --tag="qform-views"

您可以直接编辑文件,或者组件模板 "x-qform-input"、"x-qform-error" 和 "x-qform-submit" 支持使用后缀。

创建模板的副本,并添加后缀,例如 input.blade.php 变为 input_bootstrap3.blade.php,然后您可以直接在组件上设置后缀 "bootstrap3",例如 <x-qform-input template="bootstrap3" .../>,或全局通过 QForm::setGlobalTemplate('bootstrap3') 或 @QFormTemplate('bootstrap3')

其他内容

您可以使用 <x-qform-form action="..." > <x-qform-form /> 组件快速创建表单。方法将默认为 POST,并在必要时提供 @csrf 和 @method

许多功能在此处未记录

注释

此代码未经彻底检查,不符合任何标准。按原样提供。