rcfm v2.2.1
ReactiveForm
https://reactive-form.github.io/
ReactiveForm 是一款模型驱动的可扩展的表单引擎,遵从模型与视图分离的设计原则。 支持对不同的 UI 框架和运行环境定制视图组件,同时保持一致的模型 API 对响应式的数据处理过程进行干预和扩展。
快速开始
安装
ReactiveForm 提供多种安装格式,推荐使用esm格式。 建议将项目中打包工具 & Node 升级至支持 ES Module 的版本,以便于使用 sub path import。
yarn
yarn add 'rcfm'
npm
npm install 'rcfm' --save
构建模型
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
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(
<Builder reactive={reactive} />
)
Vue
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: `<Builder :reactive="reactive" />`
}).mount('#builder')
使用内置表单填写视图
React
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(
<Renderer reactive={reactive} />
)
Vue
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: `<Renderer :reactive="reactive" />`
}).mount('#renderer')
缺陷与特性请求
提交缺陷或特性请求前, 请先搜索 issue list 中是否提交过类似 issue, 请不要重复提交。
参与贡献
开始参与贡献前, 请阅读 CONTRIBUTING 指引, 搭建合适的开发环境。
版本管理
ReactiveForm 遵循 SemVer 版本管理方式。 各版本变更请参考 CHANGELOG
版权协议
Copyright JLxiangyun under the CC BY-ND license.
6 months ago
6 months ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago