README

安装

通过 composer 安装

composer require lyrasoft/formkit

然后将文件复制到项目中

php windwalker pkg:install lyrasoft/formkit -t routes -t migrations -t seeders

种子文件

将 formkit-seeder.php 添加到 resources/seeders/main.php

语言文件

如果您不想覆盖语言，请将此行添加到管理端和前端中间件中

$this->lang->loadAllFromVendor('lyrasoft/formkit', 'ini');

// OR

$this->lang->loadAllFromVendor(\Lyrasoft\Formkit\FormkitPackage::class, 'ini');

或者运行此命令来复制语言文件

php windwalker pkg:install lyrasoft/formkit -t lang

注册管理菜单

编辑 resources/menu/admin/sidemenu.menu.php

// Contact
$menu->link('表單管理')
    ->to($nav->to('formkit_list'))
    ->icon('fal fa-layer-group');

作为独立页面使用

复制 URL 或从编辑侧边栏打开页面

您将看到独立页面

页面的布局配置是可配置的，请参阅配置文件

    // ...
    'view' => [
        'default_extends' => 'global.body',
        'extends' => [
            'global.body' => 'Default Layout',
            
            // You can add new layout
            'layout.blog-layout' => 'Blog Layout',
        ]
    ],
    // ...

添加新的布局选项，然后它可以被选择

您可以通过切换 可使用公开网址 来禁用页面查看，如果禁用此字段，则 URL 将无法访问表单。

通过简码使用

您必须手动在代码中处理简码，例如

$formkitService = $app->retrieve(\Lyrasoft\Formkit\Formkit\FormkitService::class);

// In blade
{!! $formkitService->parseShortCode($article->getFulltext()) !!}

现在您可以复制简码到文章内容中

简码使用

[formkit id=123]
[formkit alias=foo-bar]
[formkit id=123 force=1]

Formkit 发布下

当作为表单通过简码渲染并发布下时，还有一个 formkit/formkit-unpublish.blade.php 布局来显示结束信息，默认为空，如果需要，您可以修改它。

配置邮件

在 etc/packages/formkit.php 中，您可以添加自定义 cc、bcc 或目标角色以接收邮件。

通过角色检索的用户必须启用 接收邮件 以接收邮件。

    // ...

    'receivers' => [
        'roles' => [
            'superuser',
            'admin'
        ],
        'cc' => [
            //
        ],
        'bcc' => [
            //
        ],
    ],

    // ...

要修改邮件布局，请参阅 mail/formkit-receiver-mail.blade.php 和 formkit/formkit-preview-table.blade.php

表单字段和组件

将自定义小部件添加到字段卡片中

您可以在字段卡片中插入小部件的三个位置

开始
结束
工具栏

代码示例

import '@main';
import type { App } from 'vue';

const { watch, ref } = Vue;

u.on('formkit.prepared', (app: App) => {
  app.provide('field.card.end', FieldCardEnd);
});

const FieldCardEnd = Vue.defineComponent({
  name: 'FieldCardEnd',
  template: `
  <div class="row">
    <div class="form-group col-lg-3">
      <label class="form-label" for="">背景顏色</label>
      <div>
        <input type="color" class="form-control"
          v-model.lazy="item.background_color" />
      </div>
    </div>
    ...
  </div>
  `,
  props: {
    modelValue: null,
  },
  setup(props, { emit }) {
    const item = ref(props.modelValue);

    watch(item, (v) => {
      emit('update:modelValue', v);
    }, { deep: true });

    return {
      item
    };
  }
});

覆盖字段编辑组件

字段组件位于 assets/src/fields/*.ts，将您想要覆盖的文件复制到根项目的 resources/assets/src。

然后使用 $asset->alias() 来覆盖此文件。

$asset->alias(
    'vendor/lyrasoft/formkit/dist/fields/form-text.js',
    'js/path/to/form-text.js',
);

lyrasoft / formkit

维护者

详情