Vue 3.x based Form Render

github: vue form render

The online demo

Introduction to the

When we write some general background pages, we have to deal with forms a lot. So if you want to be lazy, you might think is there a way not to be a forms engineer? Using code to solve repetitive human work, yes, we can describe our form information with JSON Schema, which is much more convenient than repeating form writing controls.

But JSON Schema to form mapping, is the need to pay attention to, so… Does the industry have a better plan? The answer is yes, as shown in the following form rendering tools:

• Form Render
• Formliy
• .

Formliy is a powerful form renderer. It is currently the most React friendly. There is a vue-Formly for Vue, but only for Vue 2.x. Formliy is also very powerful, supporting not only JSON Schema but also JSX Schema for rendering forms. We simply need a lightweight, easy-to-use framework based on JSON Schema standards like Form Render.

So we have Vue 3.x based Form Render

function

Vue-form-render is a vue 3.x form renderer implemented as a prototype based on the basic capabilities of Form render. It currently supports about 90% of the form render function, and will continue to maintain support in the future.

Use the 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>

Copy the code

Array

• supportexcelImport data, convenient and quick generationform Data
• Drag-and-drop sorting is supported

"listName2": {
  "title": "Object array"."description": "Object array nesting function"."type": "array"."minItems": 1."maxItems": 3."ui:displayType": "row"."items": {
    "type": "object"."properties": {
      "input1": {
        "title": "Simple input field"."type": "string"
      },
      "selet1": {
        "title": "Radio"."type": "string"."enum": [
          "a"."b"."c"]."enumNames": [
          "Early"."In"."Night"]}}}}Copy the code

string

 "string": {
  "title": "String"."type": "string"."maxLength": 4."ui:options": {
    "placeholder": "Try to enter more than 4 characters."}}Copy the code

color-picker

 "color": {
  "title": "Color selection"."type": "string"."format": "color"
}
Copy the code

date-picker

 "date": {
  "title": "Date selection"."type": "string"."format": "date"
}
Copy the code

image

"image": {
  "title": "Picture display"."type": "string"."format": "image"
}
Copy the code

number

"allNumber": {
  "title": "The number class"."type": "object"."properties": {
    "number1": {
      "title": "Digital input box"."description": "1-1000"."type": "number"."min": 1."max": 1000
    },
    "number2": {
      "title": "With sliders"."type": "number"."ui:widget": "slider"}}}Copy the code

boolean

"allBoolean": {
  "title": "A Boolean type"."type": "object"."properties": {
    "radio": {
      "title": "Yes or no"."type": "boolean"
    },
    "switch": {
      "title": "Switch control"."type": "boolean"."ui:widget": "switch"}}}Copy the code

date-range

 "allRange": {
  "title": "The range class"."type": "object"."properties": {
    "dateRange": {
      "title": "Date range"."type": "range"."format": "dateTime"."ui:options": {
        "placeholder": [
          "Start time"."End time"]}}}}Copy the code

emun

 "allEnum": {
  "title": "Select class"."type": "object"."properties": {
    "select": {
      "title": "Radio"."type": "string"."enum": [
        "a"."b"."c"]."enumNames": [
        "Early"."In"."Night"]},"radio": {
      "title": "Radio"."type": "string"."enum": [
        "a"."b"."c"]."enumNames": [
        "Early"."In"."Night"]."ui:widget": "radio"
    },
    "multiSelect": {
      "title": "Pops"."description": "Pull down multiple options"."type": "array"."items": {
        "type": "string"
      },
      "enum": [
        "A"."B"."C"."D"]."enumNames": [
        "Hangzhou"."Wuhan"."Lake"."Guiyang"]."ui:widget": "multiSelect"
    },
    "boxes": {
      "title": "Pops"."description": "checkbox"."type": "array"."items": {
        "type": "string"
      },
      "enum": [
        "A"."B"."C"."D"]."enumNames": [
        "Hangzhou"."Wuhan"."Lake"."Guiyang"]}}}Copy the code

Object

"obj1": {
  "title": Collapsible object."description": "This is an object type."."type": "object"."ui:options": {
    "collapsed": true
  },
  "properties": {
    "input1": {
      "title": "Input box 1"."type": "string"
    },
    "input2": {
      "title": "Input box 2"."type": "string"}}}Copy the code

rich-text

{
  "type": "object"."properties": {
    "content": {
      "title": "Rich text editor"."type": "string"."format": "richText"}}}Copy the code

API

Props

parameter	instructions	type	The default value
schame	JSON Schema	object	—
formData	Form data	object	—

Events

The event name	instructions	The callback function
on-change	The user triggers a callback function that updates the form	function(value: formData)
on-validate	The user triggers the validation callback function for form updates	function(value: validates)

The last

Welcome to use and PR, we work together to create a good vue form Render

github: vue form render

The online demo