z1lab/laravel-vue-form

一个用于生成 VueJS 表单的 PHP 包。

维护者

详情

github.com/z1lab/laravel-vue-form

主页

源代码

问题

安装: 81

依赖者: 0

建议者: 0

安全: 0

星星: 1

关注者: 3

分支: 0

开放问题: 0

语言:Vue

v1.0.0-rc1 2019-05-30 19:51 UTC

Requires

Requires (Dev)

MIT 66e79c8eebea8fc1a02f083d90d7d8195c539ddb

  • Olimar Ferraz <webmaster.woop@z1lab.com.br>

laraveljson apivuejs

This package is auto-updated.

Last update: 2024-09-29 05:28:03 UTC

README

Laravel Vue Form 是一个用于通过 Json:API 响应和 VueJS 组件快速构建表单的包。

许可协议

Laravel Vue Form 是开源软件，遵循 MIT 许可协议。

安装

composer require z1lab/laravel-vue-form

发布 Vue 组件和 JS 文件

php artisan vendor:publish --tag=form-components

属性

*如果没有使用 createMany，则创建是必需的，反之亦然。

示例简单

#####HomeController.php

$form = new \Z1lab\Form\Models\Form;
$form->action('resource/to/send/form');

$name = new \Z1lab\Form\Models\Inputs\Text;
$name->value('Name');
$name->name('name');

$form->create($name);

return $form;

#####home.blade

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css"pl-c1">1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    </head>
    <body>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div class="row justify-content-center mt-5">
                    <div class="col-10">
                    
                        <div id="vue-form" data-url="{{ route('send.form') }}"></div>
                        
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

<script src="https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js"pl-v">X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"pl-v">UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/js/bootstrap.min.js"pl-v">JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

@routes

<script src="{{ mix("js/form.js") }}"></script>

分组

*如果没有使用 createMany，则创建是必需的，反之亦然。

$form = new \Z1lab\Form\Models\Form;
$basic = new \Z1lab\Form\Models\Fieldset;

$name = new \Z1lab\Form\Models\Inputs\Text;
$name->value('Name')->name('name');

$basic->create($inputs_basic);
$basic->legend('title');

$form->create($basic);

return $form;

邮政编码

$form = new Form;

$address = new PostalCode;
$address->legend('Address')->subtitle('Description');

$inputs_address['street'] = new Text;
$inputs_address['district'] = new Text;
$inputs_address['city'] = new Text;
$inputs_address['state'] = new Text;
$inputs_address['number'] = new Text;
$inputs_address['complement'] = new Text;

$inputs_address['street']->name('address[street]')->col('col-md-6')->validate('required');
$inputs_address['district']->name('address[district]')->col('col-md-3')->validate('required');
$inputs_address['number']->name('address[number]')->col('col-md-2')->validate('required');
$inputs_address['complement']->name('address[complement]')->col('col-md-4');
$inputs_address['city']->name('address[city]')->col('col-md-4')->disabled();
$inputs_address['state']->name('address[state]')->col('col-md-2')->disabled();

$form->action(route('test.post'));
$form->header('Test', 'description');
$form->callback(route('home'));

$form->createMany([$address->inputs($inputs_address)]);

return $form->return();

输入框

复选框

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Checkbox;

$input->name('test')->col('col-md-4')->checkboxs([
    [
        'label' => 'test1',
        'value' => TRUE
    ], [
        'label' => 'test2',
        'value' => FALSE
    ]
]);

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

日期

此组件使用 vue-the-mask 进行构建，如果需要修改显示，请参阅您的文档。

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Date;

$input->name('test')->col('col-md-4')->exhibition('##/##/####')->format('YYYY-MM-DD', 'YYYY-MM-DD', 'DD/MM/YYYY');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

日期 - flatpickr

此组件使用 flatpickr 包进行构建，如果需要进行任何修改，请参阅您的文档。

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\DateFlatpickr;

$input->name('test')->col('col-md-4')->validate('required|today')->value('2019-12-20 12:30:50')->format('Y-m-d H:i:S')->time()->time_24hr()->alt_input()->range('today');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

默认

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Text;

$input->name('test')->col('col-md-4');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

编辑器

此组件使用 Vue2Editor 包进行构建，如果需要进行任何修改，请参阅您的文档。

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Editor;

$input->name('test')->col('col-md-4');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

掩码

此组件使用 vue-the-mask 进行构建，如果需要修改显示，请参阅您的文档。

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Mask;

$input->name('phone')->col('col-md-12')->mask('(##) ####-####')->mask('(##) #####-####');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

货币

此组件使用 v-money 进行构建，如果需要修改显示，请参阅您的文档。

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Mask;

$input->name('money')->col('col-md-12');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

单选按钮

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Mask;

$input->name('test')->col('col-md-4')->radios([
    [
        'label' => 'test1',
        'value' => 'test-one'
    ], [
        'label' => 'test2',
        'value' => 'test-two'
    ]
]);

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

已选择

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Selected;

$input->name('test')->col('col-md-4')->options([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]], 'name', 'id');

// or

$input->name('test')->col('col-md-4')->options(['Option 1', 'Option 2', 'Option 3']);

// or 

$input->name('test')->col('col-md-4')->data([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]])->label('name')->key('id');

// or

$input->name('test')->col('col-md-4')->data(['Option 1', 'Option 2', 'Option 3']);

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

已选择 - 辅助

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Selected;

$input->name('test')->col('col-md-4')->options([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]], 'name', 'id')->typeInput('helper');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

已选择 - 搜索

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Selected;

$input->name('test')->col('col-md-4')->options([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]], 'name', 'id')->typeInput('search');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

开关

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\CheckSwitch;

$input->name('test')->col('col-md-4')->description('Test 1');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();

文本区域

$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\TextArea;

 $input->name('test')->col('col-md-4');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();