fengdi / antv-dynamic-form

基于antv 的动态表单。 在完整支持的表单组件下，拓展支持了颜色Color、旋转角度Angle、代码编辑Monaco、富文本编辑RichText、JSON编辑器、MarkDown编辑器

antv-dynamic-form

基于antv 的动态表单。 在完整支持的表单组件下，拓展支持了颜色Color、旋转角度Angle、代码编辑Monaco、富文本编辑RichText、JSON编辑器、MarkDown编辑器

安装

npm i --save antv-dynamic-form

使用

import DynamicForm from "antv-dynamic-form"
    
    let state = reactive({
    	foo: "test"
    });
    
    let schema = reactive({
    	fields:[{
          label: "输入框",
          path: "foo",
          component: "Input",
          rules:{ required: true, message: 'Please input your username!' }
        }]
    });
    
    <DynamicForm :state="state" :schema="schema"/>

schema说明

label 字段标签名称 path 字段对应states绑定的数据路径 component 组件名称支持组件参考 组件列表 tips 组件提示信息 rules 组件验证规则 props 组件的自定义传入属性，例如设置component为Input，可参考ant Input有哪些props传值 get 自定义获取绑定值 set 自定义设置绑定值

组件列表

组件名	说明
Input	输入框，参考antv的 Input
InputNumber	数字输入框，参考antv的 InputNumber
Select	选择器，参考antv的 Select
Radio	单选框，参考antv的 Radio
Switch	开关，参考antv的 Switch
Checkbox	多选框 ，参考antv的 Checkbox
Slider	滑动输入条，参考antv的 Slider
Cascader	级联选择，参考antv的 Slider
AutoComplete	自动完成，参考antv的 AutoComplete
TreeSelect	树选择，参考antv的 TreeSelect
TimePicker	时间选择，参考antv的 TimePicker
TimeRangePicker	时间范围选择，参考antv的 TimePicker
DatePicker	日期选择，参考antv的 DatePicker
RangePicker	日期范围选择，参考antv的 DatePicker
Rate	评分，参考antv的 Rate
Upload	上传，参考antv的 Upload
Transfer	穿梭框，参考antv的 Transfer
Table	编辑表格（未完成），参考antv的 Table
List	可修改（增删）列表【容器】
Group	子分组表单【容器】
Color	颜色选择
Angle	旋转按钮，用于角度选择0～360
JsonEditor	json专用编辑器
Markdown	Markdown可视化编辑器
RichText	富文本可视化编辑器
MonacoEditor	代码编辑器（vscode）

demo组件预览