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 >