vue form json schema下载 - vue form json schema源代码下载

vue form json schema

三方组件

v2.8.2

下载

VUE形式JSON模式

基于JSON模式的表单生成器，带上您的组件！

使用任何VUE组件或HTML元素！

没有预制的组件供您与您的表格产生困惑。取而代之的是，您可以使用发出的任何组件或元素，即自定义或本机。

请注意，从本质上讲，使用v-model的所有VUE组件都会发出input （或类似）事件。有关更多信息，请参见Vue的指南

安装

从V1升级？查看V2发行说明，以查看迁移是否以及如何影响您。

从NPM安装

npm install vue-form-json-schema

导入您的应用

 import Vue from 'vue' ;
import VueFormJsonSchema from 'vue-form-json-schema' ;

Vue . component ( 'vue-form-json-schema' , VueFormJsonSchema ) ;

请注意，如果您不使用WebPack / lollup，并且想使用ESM版本，则需要类似地导入VueFormJSonschema：

 import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js' ;

查看演示或在使用说明中查看最小示例以开始。

UMD

如果您使用的是UMD版本，则可以在github repo的examples文件夹和下面的UMD演示中找到更多示例。

如果您想直接在浏览器中使用vue-form-json-schema则可以使用UMD版本。如果在窗口上找到VUE，则UMD版本自动启动vue-form-json-schema组件。整个模块也可以在window.VueFormJsonSchema上可用。VUEFORMJSONSCHEMA，其中命名的导出（例如可以访问vfjsFieldMixin 。

由UNKPG托管

<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>

您可以将vue-form-json-schema@latest用于固定版本，例如[email protected]

从NPM安装

<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>

演示

请注意，所有演示都使用Bootstrap样式，但是此软件包中不包含样式，这取决于您应该使用哪些样式。

最小演示

渲染input元素的最少配置。

嵌套的UI演示

使用Bootstrap类，以显示具有不同屏幕尺寸的设备的布局如何不同。在此示例中，两个输入字段将包裹在col-12 col-sm-6类的DIV中。尝试调整您的浏览器窗口大小，也可以看到它的作用。

有条件的可见性和动画演示

有时，只有在满足条件时才能显示一个字段。使用<transition>提供动画。

VUE组件演示

查看如何在vue-form-json-schema中使用自己或第三方VUE组件。

形式的vue异步加载

从后端加载表格？查看此示例。

验证表格

一个更完整的示例，其中有验证和错误消息

注册表格示例带有嵌套特性

上面的注册表格在另一个密钥下嵌套了表单模型密钥

UMD演示

上面的所有示例均在此存储夹的examples文件夹中使用UMD版本复制。

第一个演示的在线版本

特征

支持任何HTML元素或VUE组件
小（ 32K未压缩， 6.5K Gzpipped）
标准化的JSON模式用于注释和验证（由AJV）
布局与数据结构无关

文档

Gitbook

用法

一个字段的基本示例

对于使用UMD版本，请查看使用UMD版本复制上面所有演示的examples文件夹

见演示

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

< script >
  export default {
    data ( ) {
      return {
        // An object which holds the form values
        model : { } ,
        // A valid JSON Schema object
        schema : {
          type : 'object' ,
          properties : {
            firstName : {
              type : 'string' ,
            } ,
          } ,
        } ,
        // Array of HTML elements or Vue components
        uiSchema : [ {
          component : 'input' ,
          model : 'firstName' ,
          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
          fieldOptions : {
            class : [ 'form-control' ] ,
            on : [ 'input' ] ,
            attrs : {
              placeholder : 'Please enter your first name' ,
            } ,
          } ,
        } ] ,
      } ;
    }
  } ;
< / script >