FEXT Docs

# 快速开始

# 安装

由于 FormBuilder 通过 Vue Use 提供的 useForm Composition API 来管理表单状态，同时依赖 vee-validate 来进行表单校验，因此需要一起进行安装：

npm i @fext/vue-form-builder @fext/vue-use vee-validate

# 核心类库依赖

# 默认组件

若需要进行动态配置的表单组件已经全局注册，则可以直接使用内置的 FormBuilder 组件。

# 引入方式

直接引入 FormBuilder 组件：

import { FormBuilder } from '@fext/vue-form-builder';

此外，你也可以通过插件将 FormBuilder 注册为全局组件：

import FormBuilderPlugin from '@fext/vue-form-builder'; Vue.use(FormBuilderPlugin);

# 使用方式

在父级组件中，需要先通过 useForm 创建表单的 Composition API，并提供表单的 JSON 配置：

import { useForm } from '@fext/vue-use'; import { FormBuilder } from '@fext/vue-form-builder'; export default { name: 'awesome-form' components: { FormBuilder }, setup() { // Form Composition API const form = useForm(); const { formValues, updateFormValues } = form; return { form /* 表单数据模型 */ formValues, /* 手动更新表单数据模型 */ updateFormValues }; }, data() { return { formConfig: [/* JSON Schema */] } } }

模板结构：

<div> <form-builder :form="form" :config="formConfig"></form-builder> </div>

# 工厂函数

很多情况下，我们并不希望将所有的表单组件都注册到全局。此时我们可以使用工厂函数 createFormBuilder 构建一个定制化的 FormBuilder。

import { useForm } from '@fext/vue-use'; import { createFormBuilder } from '@fext/vue-form-builder'; import ExampleFormComponents from 'path/to/components'; export default { name: 'awesome-form' components: { FormBuilder: createFormBuilder({ components: { ...ExampleFormComponents } }) } /* ... */ }

# 框架适配器

在一些流行的 UI 框架中，已经实现了很多表单基础组件，为了让你能够快速使用这些组件，我们提供了几种适配器。

实际开发过程中，你也可以根据需要封装自己的适配器。

# Element UI

组件 ElFormAdaptor 引入方式：

import ElFormAdaptor from '@fext/vue-form-builder/lib/adaptor/element';

或全局注册：

import ElFormAdaptorPlugin from '@fext/vue-form-builder/lib/adaptor/element'; Vue.use(ElFormAdaptorPlugin);

# View UI

组件 ViewFormAdaptor 引入方式：

import ViewFormAdaptor from '@fext/vue-form-builder/lib/adaptor/view';

或全局注册：

import ViewFormAdaptorPlugin from '@fext/vue-form-builder/lib/adaptor/view'; Vue.use(ViewFormAdaptorPlugin);

# Ant Design Vue

import AntFormAdaptor from '@fext/vue-form-builder/lib/adaptor/antd';

或全局注册：

组件 AntFormAdaptor 引入方式：

import AntFormAdaptorPlugin from '@fext/vue-form-builder/lib/adaptor/antd'; Vue.use(AntFormAdaptorPlugin);

# 完整示例

下面我们通过工厂函数和 Element UI 适配器演示一下实际用法：

<el-form> <form-builder :form="form" :config="formConfig"></form-builder> </el-form> 
import { useForm } from '@fext/vue-use'; import { createFormBuilder } from '@fext/vue-form-builder'; import ElFormAdaptor from '@fext/vue-form-builder/lib/adaptor/element'; export default { components: { FormBuilder: createFormBuilder({ components: { ElFormAdaptor } }) }, setup() { const form = useForm(); const { formValues, updateFormValues } = form; return { form, /* 表单数据模型 */ formValues, /* 手动更新表单数据模型 */ updateFormValues }; }, data() { return { formConfig: [ { component: 'el-card', props: { header: 'Basic Group' }, fields: [ { name: 'comment', component: 'ElFormAdaptor', label: 'Description', rules: { required: true }, props: { type: 'textarea', rows: 5, placeholder: 'Use adaptor and render with default(el-input) component' } } ] } ] }; } };

← 共享配置 →