element-form-builder
v2.0.2
Published
Build powerful element-ui form with JSON schema.
Downloads
18
Maintainers
Readme
element-form-builder
Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element UI are supported.
Example
:zap: Live Preview | :book: Storybook
Core Features
- :tv: Powerful - use composition api to manage complex form state
- :camera: Flexible - support any custom input components
- :watch: Adaptable - different ui frameworks can be used out of the box through the adapters
- :radio: Reliable - has been used in multiple applications in the production environment
Quick Start
First you need a vue application like Vue Admin Next.
Install
npm i element-form-builder
Registration
Global Registration
import FormBuilder from 'element-form-builder';
import ElFormAdaptor from 'element-form-builder/lib/adaptor/element';
Vue.use(FormBuilder); // form-builder
Vue.use(ElFormAdaptor); // el-form-adaptor
Local Registration
Use the factory method based on the specified component:
import { createFormBuilder } from 'element-form-builder';
import { ElFormAdaptor } from 'element-form-builder/lib/adaptor/element';
import AwesomeFormComponents from 'path/to/awesome/components';
export default {
name: 'awesome-form'
components: {
FormBuilder: createFormBuilder({
components: {
ElFormAdaptor,
...AwesomeFormComponents
}
})
},
}
Build Form
Vue template:
<el-form>
<form-builder :form="form" :config="formConfig"></form-builder>
</el-form>
Vue component:
import { useForm } from '@fext/vue-use';
export default {
components: {
FormBuilder: createFormBuilder({
components: {
ElFormAdaptor
}
})
},
setup() {
const form = useForm();
return {
form
};
},
data() {
return {
formConfig: [
{
component: 'div',
fields: [
{
name: 'comment',
component: 'ElFormAdaptor',
label: 'Normal Input',
rules: {
required: true
},
props: {
placeholder: 'Render with el-input component'
}
}
]
}
]
};
}
};
Docs
TODO
Built With
License
Copyright (c) 2018 - present, Felix Yang