vue form json schema
v2.8.2
JSON 스키마 기반 양식 생성기, 구성 요소를 가져 오십시오!
당신이 당신의 양식을 함께 퍼즐로 만들 수있는 미리 빌드 구성 요소는 없습니다 . 대신 이벤트, 사용자 정의 또는 기본을 방출하는 구성 요소 또는 요소를 사용할 수 있습니다.
v-model사용하는 모든 VUE 구성 요소는input(또는 유사한) 이벤트를 방출합니다. 자세한 내용은 Vue의 안내서를 참조하십시오
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 / Rollup을 사용하지 않고 ESM 버전을 사용하려면 vueformjsonschema를 가져와야합니다.
import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js' ;데모를 확인하거나 사용 지침에서 최소한의 예를 확인하여 시작할 수 있습니다.
UMD 버전을 사용하는 경우 GitHub Repo의
examples폴더 및 아래 UMD 데모에서 더 많은 예제를 찾을 수 있습니다.
브라우저에서 vue-form-json-schema 직접 사용하려면 UMD 버전을 사용하여 수행 할 수 있습니다. VUE가 창에 발견되면 UMD 버전은 vue-form-json-schema 구성 요소를 자동 설치합니다. 전체 모듈은 window.VueFormJsonSchema vfjsFieldMixin 사용할 수 있습니다.
<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>
vue-form-jschema@ [email protected] [email protected]과 같은 고정 된 버전의 vue-form-json-schema@latest
<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>
모든 데모는 부트 스트랩 스타일을 사용하지만이 패키지에는 스타일이 포함되어 있지 않으며 어떤 스타일을 사용해야하는지 귀하에게 달려 있습니다.
input 요소를 렌더링하기위한 최소한의 구성.
화면 크기가 다른 장치의 경우 부트 스트랩 클래스를 사용하여 레이아웃이 어떻게 다른지 보여줍니다. 이 예에서는 두 개의 입력 필드가 col-12 col-sm-6 클래스와 함께 DIV 내부에 포장됩니다. 브라우저 창을 크기를 조정 해보십시오.
때로는 조건이 충족 된 경우에만 필드가 표시되어야합니다. <transition> 사용하여 애니메이션을 제공합니다.
vue-form-json-schema 에서 자신의 또는 제 3 자 VUE 구성 요소를 사용하는 방법을보십시오.
백엔드에서 양식을로드 하시겠습니까? 이 예를 확인하십시오.
유효성 검사 및 오류 메시지가 포함 된보다 완전한 예입니다
양식 모델 키가 다른 키 아래에 중첩되는 위의 등록 양식
위의 모든 예제는이 repo의 examples 폴더에서 UMD 버전을 사용하여 복제됩니다.
첫 번째 데모의 온라인 버전
32K 압축되지 않은, 6.5K gzipped)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 >JSON 스키마 및 내부 유효성 검사를 사용한 양식 유효성 검사 용
패키지 전체에 걸쳐 get , set 및 merge 사용됩니다. 번들 크기는 매우 중요하고 항상 고려되므로 우리는 절대 필수품 만 포함하도록 Lodash를 크게 제거합니다.
v2.5.9로 테스트했지만 아마도 모든 버전에서 작동합니다> = v2.4.0
options.ajv.locale 있는 1.15.2로 추가vfs-global Prop ui-schemavfs-component 소품 ui-schema
