README

警告：此包已不再维护！

此包提供了一组 Vue.js 表单和输入组件，用于在Laravel应用程序上创建美观且易于使用的Ajax请求。

完整文档：https://ferdinandfrank.github.io/vue-forms/

示例

HTML表单，包含两个输入组件，提交后将被清除。此外，服务器处理请求后还会显示成功提示消息。

在你的HTML / Blade文件中

<ajax-form method="[METHOD]" action="[ACTION]" :clear="true">
    <form-input name="name" label="Name" :value="MyName"></form-input>
    <form-select name="gender" label="Gender" :value="m">
       <option value="m">Male</option>
       <option value="f">Female</option>
    </form-select>
    
    <button type="submit">Submit</button>
</ajax-form>

在你的控制器方法中

public function handleRequest(Request $request) {
   // Handle the request

   return response()->json([
       'alert' => [
           'title'   => 'Success',
           'message' => 'Request was successful!',
           'accept'  => 'Alright!'
       ]
   ]);
}

要求

服务器要求

PHP >= 7.0
一个现有的 >= Laravel 5.4 项目

JS要求

您的Laravel应用程序需要满足一些要求才能在客户端正确运行该包。您可以通过在 package.json 文件中包含相应的条目来安装它们（参见安装 #4）。

必需

Vue.js >= 2.1.10： 用于渲染Vue.js组件。
Lodash >= 4.17.4： 用于在脚本中使用JS辅助函数，使代码更简洁。
MomentJS >= 2.18.1： 用于JS上的日期格式化。
JQuery >= 3.1.1： 用于元素选择和Ajax请求。

可选

Bootstrap >= 3.3.7： 用于输入组件的设计。
Sweetalert >= 2.0.4： 用于显示美观的提示/确认消息。
Tooltip.js >= 1.1.5： 用于在输入上显示美观的提示文本。

可选要求

要显示提交表单时的加载图标以及输入旁边的帮助图标，将使用 Font Awesome。需要在应用程序中正确安装 Font Awesome 以显示这些图标。否则，需要配置组件。

组件的HTML内容是为与 Bootstrap 4 一起使用而设计的。为了获得美观的输入设计，需要Bootstrap。

安装

要开始，请通过Composer包管理器安装此包
```
composer require ferdinandfrank/vue-forms
```
在Laravel >= 5.5中，此包会自动注册。对于之前的Laravel版本，请将以下条目添加到 config/app.php 中的providers数组
```
'providers' => [
   ...
   ...
   \FerdinandFrank\VueForms\Providers\VueFormsServiceProvider::class
]
```
将Vue.js组件和其他脚本发布到 resources/assets/vendor/vue-forms 文件夹，这样您就可以在应用程序的脚本中编辑和包含包的文件
```
php artisan vue-forms:init
```

如果这些条目尚不存在，请将以下条目添加到 package.json 文件中的 dependencies 数组。前四个是必需的，最后四个（sweetalert、bootstrap-sass、popper.js、tooltip.js）是可选的（参见可选要求）。

"dependencies": {
    "vue": "^2.1.10",
    "lodash": "^4.17.4",
    "jquery": "^3.1.1",
    "moment": "^2.18.1",
    "sweetalert": "^2.0.4",
    "bootstrap-sass": "^3.3.7",
    "popper.js": "^1.12.5",
    "tooltip.js": "^1.1.5"
  }

在您的应用脚本中包含主要JS文件，例如，从 resources/assets/js/app.js 复制以下语句
```
require('../vendor/vue-forms/js/vue-forms');
```
在您的应用脚本中包含主要SCSS文件，例如，从 resources/assets/sass/app.scss 复制以下语句
```
@import "../vendor/vue-forms/scss/vue-forms";
```
通过webpack或其他任何编译器编译您的脚本。

就这些！现在您可以使用此包的Vue.js组件。

文档

点击此处查看完整文档

许可证

MIT

ferdinandfrank / vue-forms

维护者

详细信息

README

示例

要求

服务器要求

JS要求

必需

可选

可选要求

安装

文档

许可证