github：基于Vue3.x的vueformrender在线demo为什么要造这个轮子？之前用过React的FormRender的朋友应该比较清楚，FormRender可以快速构建基于JSONSchema的表单块。不得不说，在以下场景使用ForRender会给开发带来极大的便利：快速生成标准化表单视图：编写相应的参数配置，快速生成标准表单，省去了使用AntDesign的麻烦——likeforms本地可视化配置界面生成：可以从代码层面自动生成JSONSchema，完成整体流程。业务能力配置接口生成：常用于后台系统。界面同学可以通过吐出JSONSchema字段到前端界面来渲染出自己的。获取想要的界面和用户的输入，提交给后台，无需发布即可无缝扩展各种类型。配合配置输入和构建系统使用：FormRender在正常显示的情况下可以很简单的适配原来的主题，但是现在我们的场景是基于vue3.x框架来使用formrender，但是formrender目前只支持反应。然后在google上搜了很多，没有找到vue3.xformrender可以的，倒是vue2.x的倒是不少。出于这样的需求，我自己做了一个。函数vue-form-render是基于FormRender基本能力为原型的Vue3.x版本的表单渲染器。目前支持90%左右的FormRender功能，未来会继续保持支持。Array支持从excel导入数据，方便快捷生成表单数据，支持拖拽排序"listName2":{"title":"ObjectArray","description":"ObjectArrayNestingFunction","type"：“数组”，“minItems”：1，“maxItems”：3，“ui：displayType”：“行”，“项目”：{“类型”：“对象”，“属性”：{“input1”：{"title":"简单输入框","type":"string"},"selet1":{"title":"单选","type":"string","enum":["a","b","c"],"enumNames":["early","middle","late"]}}}}string"string":{"title":"string","type":"string","maxLength":4,"ui:options":{"placeholder":"尝试输入超过4个字符"}}color-picker"color":{"title":"颜色选择","type":"string","format":"color"}date-picker"date":{"title":"DatePicker","type":"string","format":"date"}image"image":{"title":"图像显示","type":"string","format":"image"}number"allNumber":{"title":"numberclass","type":"object",“特性”：{“数字r1":{"title":"数字输入框","description":"1-1000","type":"number","min":1,"max":1000},"number2":{"title":"withslider","type":"number","ui:widget":"slider"}}}boolean"allBoolean":{"title":"booleanclass","type":"object","properties":{"radio":{"title":"passed","type":"boolean"},"switch":{"title":"switchcontrol","type":"boolean","ui:widget":"switch"}}}date-range"allRange":{"title":"rangeclass","type":"object","properties":{"dateRange":{"title":"DateRange","type":"range","format":"dateTime","ui:options":{"placeholder":["StartTime","EndTime"]}}}}emun"allEnum":{"title":"Selection","type":"object","properties":{"select":{"title":"Single","type":"string","enum":["a","b","c"],"enumNames":["early","Middle","Late"]},"radio":{"title":"单选","type":"string","enum":["a","b","c"],"enumNames":["early","middle","late"],"ui:widget":"radio"},"multiSelect":{"title":"多选","description":"下拉多个选择”，“类型”：“数组”，“项目”：{“类型”：“字符串”}，“枚举”：[“A”，“B”，“C”，“D”]，“枚举名称”:["杭州","武汉","湖州","贵阳"],"ui:widget":"multiSelect"},"boxes":{"title":"多选","description":"checkbox","type":"array","items":{"type":"string"},"enum":["A","B","C","D"],"enumNames":["杭州","武汉","湖州","贵阳"]}}}Object"obj1":{"title":"Foldableobject","description":"Thisisanobjecttype","type"：“对象”，“ui：选项”：{“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-vueimport{createApp}from'vue'importAppfrom'./App.vue'importAntdfrom'ant-design-vue';import'ant-design-vue/dist/antd.css';constapp=createApp(App);app.use(Antd);app.mount('#app');引入vue-form-rendernpmikaer-form-render--save
