关于javascript:基于Vue-3x-实现的-Form-render

github: vue form render

在线演示

为什么要造这个轮子？

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

1. 规范化表单视图的疾速生成：写好对应的参数配置，疾速生成一个规范表单，省去了应用类 Ant Design 表单的麻烦中央
2. 可视化配置界面生成：并能够从代码层面 主动生成 JSON Schema，来实现整体流程的买通
3. 服务能力配置界面生成：罕用于后盾字段零碎中，接口同学通过吐 JSON Schema 字段给前端界面，渲染出他所想要的界面以及获取用户的输出进行提交给后端，能够起到无需公布就可无缝扩大各种类型的作用
4. 作为配置输出和搭建零碎配合应用：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>

API

Props

Events

最初

欢送大家应用并pr，咱们一起打造一款好用的vue form render

github: vue form render

在线演示