# 介绍

# 准备

开始之前请务必先了解 Vue (opens new window)JsonSchema (opens new window)

# 体验

# 多版本选择

支持如下Vue版本和Ui框架,结合你的项目框架选择版本。

各版本api和使用形式99%一致,仅有如下差异:

各版本差异

  • vue3 emit事件都会去掉on前缀,详细看这里 事件 Emit Event
  • vue3 antd Vue v-model 不使用 modelValue props,这里需要做个转换,详细参见

# @lljj/vue-json-schema-form

  • 适配ui库:Vue2 ElementUi
    • 注意需要全局注册Element相关组件,也可根据控制台提示按需use
  • package name: @lljj/vue-json-schema-form
  • umd cdn地址:@lljj/vue-json-schema-form cdn (opens new window)
  • umd script 标签形式引入暴露全局变量 window.vueJsonSchemaFormwindow.vueJsonSchemaForm.default 暴露组件,同时会注册 VueForm 全局组件
  • playground (opens new window)

# @lljj/vue2-form-iview3

  • 适配ui库:Vue2 iview3
    • 注意需要全局注册 iview3 相关组件,也可根据控制台提示按需use
  • package name: @lljj/vue2-form-iview3
  • umd cdn地址:@lljj/vue2-form-iview3 cdn (opens new window)
  • umd script 标签形式引入暴露全局变量 window.vue2FormIview3window.vue2FormIview3.default 暴露组件,同时会注册 vue2FormIview3 全局组件
  • playground (opens new window)

# @lljj/vue3-form-element

# @lljj/vue3-form-naive

# @lljj/vue3-form-ant

antd 4x 版本注意:

  • v4版本请使用,import { JsonSchemaFormAntdV4 } from "@lljj/vue3-form-ant";
  • v3版本还是建议使用 default export

# vue3 ant、naiveUi v-model 特殊处理

例如 a-input 组件,ant vue3需要使用 v-model:value,但在整个框架内部 v-model 都是使用 modelValue,所以这里就需要对不一致的props通过中间组件组做转换。

你可以自行转换,也可以使用内置方法 modelValueComponent 转换,如下:

// 返回一个接受 modelValue 和 update:modelValue v-model的组件
import { modelValueComponent } from '@lljj/vue3-form-ant';
const MyFixInputComponent = modelValueComponent('a-input', {
    model: 'value' // 这里要根据ant组件 model的参数传递
});

// naive 也是类似操作
import { modelValueComponent } from '@lljj/vue3-form-naive';
const MyFixInputComponent = modelValueComponent('n-input', {
    model: 'value' // 这里要根据naive组件 model的参数传递
});

提示

这样使用起来还是有些麻烦,目前已经对常用的Widget组件做了内置, 参见 ant、naiveUi vue 附加全局Widget组件

# 快速开始

后续的文档都以 @lljj/vue-json-schema-form 为例

# npm

# 安装
npm install --save @lljj/vue-json-schema-form

# yarn
yarn add @lljj/vue-json-schema-form
  • 使用
import VueForm from '@lljj/vue-json-schema-form';
import Vue from 'vue';

// 全局注册 或者可以在组件内注册
Vue.component('VueForm', VueForm);

# script引入

# script引入
<script src="//npm.elemecdn.com/@lljj/vue-json-schema-form/dist/vueJsonSchemaForm.umd.min.js"></script>

# DEMO

演示渲染用户信息的表单,点击显示代码可查看源代码或者在codepen运行

<template>
    <vue-form
        v-model="formData"
        :ui-schema="uiSchema"
        :schema="schema"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    },
                    bio: {
                        type: 'string',
                        title: '签名',
                        minLength: 10,
                        default: '知道的越多、就知道的越少',
                    }
                }
            },
            uiSchema: {
                bio: {
                    'ui:options': {
                        placeholder: '请输入你的签名',
                        type: 'textarea',
                        rows: 1
                    }
                }
            }
        };
    }
};
</script>
显示代码
复制代码 | 在线运行

# 基本概念

通过 JSON Schema 生成对应的form表单

  • schema title 属性作为 form表单的标题
  • schema description 属性作为表单的描述

基于组件递归的形式,逐级渲染数据,如下图:(点击放大) Vjsf

其中涉及到两个概念,FieldWidget

  • Field 用来渲染每一个节点对应的组件,可以是任意节点,一般组件内会包含 FormItem 组件
  • Widget 用来渲染用户输入信息的组件,如 inputselect,被 FormItem 组件包裹

Field Widget 都可以通过ui-schema自定义, 详细方法可以查看 自定义Field自定义Widget

# 暴露方法

import VueForm, {
    getDefaultFormState,
    fieldProps,
    vueUtils,
    formUtils,
    schemaValidate,
    i18n
} from '@lljj/vue-json-schema-form';

# VueForm

默认导出 VueForm组件

# getDefaultFormState

通过 JSON Schema 计算当前 FormState 的值

  • 参数:(schema, formData, rootSchema, includeUndefinedValues)
  • schema object 需要计算的schema
  • formData object 当前的 formData 值,没有可以传 undefined
  • rootSchema object 需要计算的schema的根节点schema
  • includeUndefinedValues boolean 是否包含未定义的值 ,默认 true

不使用 ui-schema ui:field 一般不会使用

# fieldProps

Field props配置,如果需要使用 ui:field 自定义field 组件,需要使用它定义组件props

不使用 ui-schema ui:field 一般不会使用

# vueUtils

提供一些内部Vue相关的utils方法,详细的可以 参见源码 (opens new window)

不使用 ui-schema ui:field 一般不会使用

# formUtils

提供一些内部Form相关的utils方法,详细的可以 参见源码 (opens new window)

不使用 ui-schema ui:field 一般不会使用

# schemaValidate

提供一些内部校验schema相关的方法,详细的可以 参见源码 (opens new window)

不使用 ui-schema ui:field 一般不会使用

# 说明

  • 遵循 JSON Schema 规范,只需要给定 JSON Schema,即可生成对应的form表单
  • 快速配置个性化ui视图和校验错误信息,可适配常用的ui库,可通过配置适配ElementUi,iView 或者你自己开发的组件库等
  • 表单schema校验使用 ajv (opens new window)
  • 设计思想和对schema解析索引参考 react-jsonschema-form (opens new window)
最后更新时间: 10/5/2023, 1:52:28 PM