README

为 Laravel 6 及以上版本的小型输入构建器

安装

首先使用 composer 安装该包

composer install ddrcha/easyfield

然后在你的 config/app.php 文件中添加两行以设置包的引用

'providers' => [
	...
	Ddrcha\Easyfield\EasyfieldServiceProvider::class,
],

 'aliases' => [
	...
	'Easyfield' => Ddrcha\Easyfield\Facades\Easyfield::class,
],

Easyfield 默认集成了 Bootstrap 5 和 Materialize 的模板。

你必须发布其中之一才能使用该包

php artisan vendor:publish --provider="Ddrcha\Easyfield\EasyfieldServiceProvider" --tag=bootstrap4
OR
php artisan vendor:publish --provider="Ddrcha\Easyfield\EasyfieldServiceProvider" --tag=materialize

所有模板（按输入类型一个一个）都将在你的 "[project]/resources/views/vendor/easyfield" 文件夹中可用。你可以自由修改它并添加其他视图（你可以使用 "template" 选项设置）。

图标

默认情况下，Easyfield 使用 Font Awesome 图标。如果你想使用 Materialize 图标，你必须发布配置文件并修改 "icons" 变量

php artisan vendor:publish --provider="Ddrcha\Easyfield\EasyfieldServiceProvider" --tag=config

（将在你的 "[project]/config" 文件夹中添加一个名为 "easyfield.php" 的文件）。

用法

在使用 Easyfield 之前，不要忘记在你的视图中包含你想要使用的库（Bootstrap 5、Materialize、DatePicker、Select2、Font Awesome 等）。

语法

要显示一个字段，使用以下语法

{!! \Easyfield::input($input, $item, $errors) !!}
// $input (array) : All configuration options
// $item  (eloquent object) : main object used to complete the form
// $errors (array) : optional returns of validation form.

详细信息中的所有可用选项

简单示例

注意：为了最佳渲染效果，请将所有字段插入到标签中（如果你使用 Bootstrap 4）。

<div class="form-row"></div>

文本

// In your blade template
@php
	// ---- title
	$input = array(
		'type' => 'text',
		'name' => 'title',
		'label' => 'Title of post',
		'required' => true
	);
@endphp
{!! \Easyfield::input($input, $item, $errors) !!}		

密码

// In your blade template
@php
	// ---- title
	$input = array(
		'type' => 'password',
		'name' => 'title',
		'label' => 'Title of post',
		'required' => true
	);
@endphp
{!! \Easyfield::input($input, $item, $errors) !!}		

文件

// In your blade template
@php
	// ---- avatar
	$input = array(
		'type' => 'file',
		'name' => 'avatar',
		'label' => 'User avatar',
		'icon' => 'fas fa-file',
		'note' => 'The photo must be a png or jpg file.'
	);
@endphp
{!! \Easyfield::input($input, $item, $errors) !!}		

选择

// In your controller
$data['categories'] = \App\Models\Category::pluck('title', 'id'); // to spend in your view

// In your blade template
@php
	// ---- category_id
	$input = array(
		'type' => 'select',
		'name' => 'category_id',
		'label' => 'Main category',
		'data' => $categories
	);
@endphp
{!! \Easyfield::input($input, $selected, $errors) !!}

高级示例

富文本编辑器（通过 ckeditor 5）

// In your blade template
@php
	// ---- content
	$input = array(
		'type' => 'text',
		'name' => 'content',
		'label' => 'Content of post',
		'class' => 'js-wysiwyg' 
	);
@endphp
{!! \Easyfield::input($input, $item, $errors) !!}	

// in your .js file
if ($('.js-wysiwyg').length){
	var allEditors = document.querySelectorAll('.js-wysiwyg');
		
	for (var i = 0; i < allEditors.length; ++i) {
		
		ClassicEditor
		.create(
			allEditors[i], ...
		);
	}
}

日期选择器（通过 jquery DatePicker）

// In your blade template
@php
	// ---- birthdate
	$input = array(
		'type' => 'text',
		'name' => 'birthdate',
		'label' => 'Date of birth',
		'class' => 'js-datepicker' 
	);
@endphp
{!! \Easyfield::input($input, $item, $errors) !!}	

// in your .js file
if ($('.js-datepicker').length){
	$('.js-datepicker').datepicker();
}

多选（通过 select2）

// In your controller
$data['editors'] = \App\Models\Editor::pluck('title', 'id'); // to spend in your view
$selectedEditors = array();
foreach($item->editors as $editor){
	$selectedEditors[] = $editor->id;
}
$data['selectedEditors'] = $selectedEditors:

// In your blade template
@php
	// ---- editors
	$input = array(
		'type' => 'select',
		'name' => 'editors[]',
		'label' => 'Editors',
		'data' => $editors,
		'class' => 'js-multiple-select',
		'value' => $selectedEditors, // array to set default values
		'additional' => ['multiple' => 'multiple'] // attribute required by select2
	);
@endphp
{!! \Easyfield::input($input, $item, $errors) !!}	

// in your .js file
if ($('.js-multiple-select').length){
	$('.js-multiple-select').select2();
}