A model-driven and extensible form engine.
https://reactive-form.github.io/
ReactiveForm 是一款模型驱动的可扩展的表单引擎,遵从模型与视图分离的设计原则。
支持对不同的 UI 框架和运行环境定制视图组件,同时保持一致的模型 API 对响应式的数据处理过程进行干预和扩展。
ReactiveForm 提供多种安装格式,推荐使用esm格式。
建议将项目中打包工具 & Node 升级至支持 ES Module 的版本,以便于使用 sub path import。
#### yarn
``bash`
yarn add 'rcfm'
#### npm
`bash`
npm install 'rcfm' --save
`javascript
import {Form} from 'rcfm'
let {reactive} = Form.create()
let fieldsetId = reactive.add({
props: {
type: 'Fieldset',
name: 'fields',
label: '用户信息统计表'
}
})
let textFiledId = reactive.add({
parentId: fieldsetId,
props: {
type: 'TextField',
name: 'username',
label: '用户名',
validation: [{presence: true}, {maxLength: 10}]
}
})
let numberFieldId = reactive.add({
parentId: fieldsetId,
props: {
type: 'NumberField',
name: 'age',
label: '年龄',
visible: [{
when: {valOf: '<< fields.username.value >>', presence: true},
then: true
}, {
else: false
}]
}
})
`
当前版本提供基于 React 和 Vue 的 UI 组件及内置表单构建/填写视图,使用构建视图可通过 UI 可视化方式构建模型,
构建的模型配置可通过填写视图生成表单。
#### 使用内置表单构建视图
##### React
`javascript
import 'rcfm/style'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Form } from 'rcfm'
import { UI } from 'rcfm/react'
const {reactive} = Form.create()
const Builder = UI.use('React.View.Form.Builder')
ReactDOM.createRoot(
document.getElementById('builder')
).render(
)
`
##### Vue
`javascript
import 'rcfm/style'
import { createApp } from 'vue'
import { Form } from 'rcfm'
import { UI } from 'rcfm/vue'
const {reactive} = Form.create()
const Builder = UI.use('Vue.View.Form.Builder')
createApp({
setup() { return {reactive} },
components: {Builder},
template: `
}).mount('#builder')
#### 使用内置表单填写视图
##### React
`javascript
import 'rcfm/style'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Form } from 'rcfm'
import { UI } from 'rcfm/react'
const {reactive} = Form.create()
reactive.seed(reactive.family.root(), {/ 构建视图导出的表单配置对象 /})
const Renderer = UI.use('React.View.Form')
ReactDOM.createRoot(
document.getElementById('renderer')
).render(
)
`
##### Vue
`javascript
import 'rcfm/style'
import { createApp } from 'vue'
import { Form } from 'rcfm'
import { UI } from 'rcfm/vue'
const {reactive} = Form.create()
reactive.seed(reactive.family.root(), {/ 构建视图导出的表单配置对象 /})
const Renderer = UI.use('Vue.View.Form')
createApp({
setup() { return {reactive} },
components: {Renderer},
template: ``
}).mount('#renderer')
提交缺陷或特性请求前, 请先搜索 issue list 中是否提交过类似 issue,
请不要重复提交。
开始参与贡献前,
请阅读 CONTRIBUTING 指引,
搭建合适的开发环境。
ReactiveForm 遵循 SemVer 版本管理方式。
各版本变更请参考 CHANGELOG
Copyright JLxiangyun under the CC BY-ND license.