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组件预览