• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

基于Vue 3.x 实现的 Form render

互联网 diligentman 4天前 9次浏览

基于Vue 3.x 实现的 Form render

基于Vue 3.x 实现的 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.xform 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": [
          "早",
          "中",
          "晚"
        ]
      }
    }
  }
}

基于Vue 3.x 实现的 Form render

string

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

基于Vue 3.x 实现的 Form render

color-picker

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

基于Vue 3.x 实现的 Form render

date-picker

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

基于Vue 3.x 实现的 Form render

image

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

基于Vue 3.x 实现的 Form render

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

基于Vue 3.x 实现的 Form render

boolean

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

基于Vue 3.x 实现的 Form render

date-range

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

基于Vue 3.x 实现的 Form render

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": [
        "杭州",
        "武汉",
        "湖州",
        "贵阳"
      ]
    }
  }
}

基于Vue 3.x 实现的 Form render

Object

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

基于Vue 3.x 实现的 Form render

rich-text

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

基于Vue 3.x 实现的 Form render

快速使用

依赖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 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,
            '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

参数 说明 类型 默认值
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

在线演示


喜欢 (0)