V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
muwoo
V2EX  ›  Vue.js

基于 Vue 3.x 的 Form render

  •  
  •   muwoo · 2021-02-14 17:40:29 +08:00 · 1654 次点击
    这是一个创建于 1139 天前的主题,其中的信息可能已经有所发展或是发生改变。

    github: vue form render

    详细文档

    简介

    我们在写一些常规后台页面的时候,避免不了是需要经常和表单打交道。所以可以想偷懒的小伙伴可能会考虑有没有办法不去做表单工程师?用代码解决重复的人肉工作,没错,我们可以通过 JSON Schema 来描述我们的表单信息,这比重复的写表单控件可方便多了。

    但是 JSON Schema 到表单的映射,则是需要我们去关注的,so... 业界有没有比较好的方案呢?答案是肯定的,比如以下几个表单渲染工具:

    • Form Render
    • Formliy
    • ... Formliy 是一款比较强大的表单渲染器,目前对 React 支持最友好,Vue 相关的有一个 vue-formly 但也仅仅是 Vue 2.x 的。还有就是 Formliy 过于强大,不仅仅支持 JSON Schema 还支持 JSX Schema 渲染表单。而我们只是单纯需要像 Form Render 这样的 JSON Schema 标准的轻量易用型框架。

    所以 有了这个 基于 Vue 3.x 的 Form render

    功能

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

    使用 demo

    <template>
      <div>
        <formRender
          :schema="schema"
          :formData="formData"
          @on-change="change"
          @on-validate="validate"
        />
      </div>
    </template>
    
    <script>
    import {reactive, toRefs} from 'vue';
    
    // render index
    import FormRender from 'kaer-form-render';
    // form render style
    import '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,
              }
            },
          },
          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>
    
    

    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"
        }
      }
    }
    

    API

    Props

    参数 说明 类型 默认值
    schame JSON Schema object --
    formData 表单的数据 object --

    Events

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

    最后

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

    github: vue form render

    在线演示

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2763 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:49 · PVG 20:49 · LAX 05:49 · JFK 08:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.