github: vue form render

在线演示

为什么要造这个轮子？

之前用过 React 的 Form Render 的小伙伴应该比较清楚 Form Render 可以基于 JSON Schema 快速构建出表单区块。不得不说 For Render 在以下场景中的使用会给开发带来巨大的便利：

规范化表单视图的快速生成：写好对应的参数配置，快速生成一个标准表单，省去了使用类 Ant Design 表单的麻烦地方可视化配置界面生成：并可以从代码层面 自动生成 JSON Schema，来完成整体流程的打通服务能力配置界面生成：常用于后台字段系统中，接口同学通过吐 JSON Schema 字段给前端界面，渲染出他所想要的界面以及获取用户的输入进行提交给后端，可以起到无需发布就可无缝扩展各种类型的作用作为配置输入和搭建系统配合使用：FormRender 在正常展示的情况下，可以很简单地进行和原主题的适配使用

但是现在我们的场景是基于 vue 3.x 的框架基础上去使用 form render 但是 form render 目前也只支持 react。然后我在 Google 上搜了一大圈，也没找到一个还可以的 vue 3.x的 form render，不过 vue 2.x 的还是挺多的。出于这样的诉求，自己动手撸了一个。

功能

vue-form-render 是基于 Form Render 基本能力作为原型实现的 Vue 3.x 版本的表单渲染器，目前支持 90% 左右的 Form Render 功能，后续会不断地维护支持。

Array支持excel导入数据，方便快速捷生成form Data支持拖拽排序

"listName2": {  "title": "对象数组",  "description": "对象数组嵌套功能",  "type": "array",  "minItems": 1,  "maxItems": 3,  "ui:displayType": "row",  "items": {    "type": "object",    "properties": {      "input1": {        "title": "简单输入框",        "type": "string"      },      "selet1": {        "title": "单选",        "type": "string",        "enum": [          "a",          "b",          "c"        ],        "enumNames": [          "早",          "中",          "晚"        ]      }    }  }}

string

 "string": {  "title": "字符串",  "type": "string",  "maxLength": 4,  "ui:options": {    "placeholder": "试着输入超过4个字符"  }}

color-picker

 "color": {  "title": "颜色选择",  "type": "string",  "format": "color"}

date-picker

 "date": {  "title": "日期选择",  "type": "string",  "format": "date"}

image

"image": {  "title": "图片展示",  "type": "string",  "format": "image"}

number

"allNumber": {  "title": "number类",  "type": "object",  "properties": {    "number1": {      "title": "数字输入框",      "description": "1 - 1000",      "type": "number",      "min": 1,      "max": 1000    },    "number2": {      "title": "带滑动条",      "type": "number",      "ui:widget": "slider"    }  }}

boolean

"allBoolean": {  "title": "boolean类",  "type": "object",  "properties": {    "radio": {      "title": "是否通过",      "type": "boolean"    },    "switch": {      "title": "开关控制",      "type": "boolean",      "ui:widget": "switch"    }  }}

date-range

 "allRange": {  "title": "range类",  "type": "object",  "properties": {    "dateRange": {      "title": "日期范围",      "type": "range",      "format": "dateTime",      "ui:options": {        "placeholder": [          "开始时间",          "结束时间"        ]      }    }  }}

emun

 "allEnum": {  "title": "选择类",  "type": "object",  "properties": {    "select": {      "title": "单选",      "type": "string",      "enum": [        "a",        "b",        "c"      ],      "enumNames": [        "早",        "中",        "晚"      ]    },    "radio": {      "title": "单选",      "type": "string",      "enum": [        "a",        "b",        "c"      ],      "enumNames": [        "早",        "中",        "晚"      ],      "ui:widget": "radio"    },    "multiSelect": {      "title": "多选",      "description": "下拉多选",      "type": "array",      "items": {        "type": "string"      },      "enum": [        "A",        "B",        "C",        "D"      ],      "enumNames": [        "杭州",        "武汉",        "湖州",        "贵阳"      ],      "ui:widget": "multiSelect"    },    "boxes": {      "title": "多选",      "description": "checkbox",      "type": "array",      "items": {        "type": "string"      },      "enum": [        "A",        "B",        "C",        "D"      ],      "enumNames": [        "杭州",        "武汉",        "湖州",        "贵阳"      ]    }  }}

Object

"obj1": {  "title": "可折叠对象",  "description": "这是个对象类型",  "type": "object",  "ui:options": {    "collapsed": true  },  "properties": {    "input1": {      "title": "输入框1",      "type": "string"    },    "input2": {      "title": "输入框2",      "type": "string"    }  }}

rich-text

{  "type": "object",  "properties": {    "content": {      "title": "富文本编辑器",      "type": "string",      "format": "richText"    }  }}

快速使用依赖ant-design-vue

import { createApp } from 'vue'import App from './App.vue'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';const app = createApp(App);app.use(Antd);app.mount('#app');

引入vue-form-render

npm i kaer-form-render --save

<template>  <div>    <formRender      :schema="schema"      :formData="formData"      @on-change="change"      @on-validate="validate"    />  </div></template><script>import {reactive, toRefs} from 'vue';// render indeximport FormRender from 'kaer-form-render';// form render styleimport 'kaer-form-render/lib/kaer-form-render.css';export default {  name: 'App',  setup() {    const state = reactive({      schema: {        type: 'object',        properties: {          string: {            title: 'string',            type: 'string',            maxLength: 4,            'ui:options': {              placeholder: 'enter more than 4 characters',            },          }        },      },      formData: {        string: 'aaa'      },    });    const change = (v) => {      state.formData = v;      console.log(v);    }    const validate = (v) => {      console.log(v);    }    return {      ...toRefs(state),      change,      validate,    }  },  components: {    FormRender,  }}</script>

APIProps

参数说明类型默认值schameJSON Schemaobject--formData表单的数据object--

Events

事件名说明回调函数on-change用户触发表单更新的回调函数function(value: formData)on-validate用户触发表单更新的校验回调函数function(value: validates)

最后

欢迎大家使用并pr，我们一起打造一款好用的vue form render