vue form json schema

Vue membentuk skema json

Generator bentuk berbasis skema JSON, bawa komponen Anda!

Gunakan komponen VUE atau elemen HTML apa pun!

Tidak ada komponen prebuilt untuk Anda teka -teki bersama. Sebaliknya, Anda dapat menggunakan komponen atau elemen apa pun yang memancarkan acara, khusus atau asli.

Perhatikan bahwa pada dasarnya semua komponen VUE yang menggunakan v-model memancarkan peristiwa input (atau serupa). Lihat Panduan Vue untuk info lebih lanjut

Instalasi

Meningkatkan dari V1? Lihat catatan rilis V2 untuk melihat apakah dan bagaimana migrasi memengaruhi Anda.

Instal dari NPM

npm install vue-form-json-schema

Impor ke aplikasi Anda

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

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

CATATAN Jika Anda tidak menggunakan Webpack / Rollup dan ingin menggunakan versi ESM, Anda perlu mengimpor VueformjSonschema seperti ini:

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

Lihatlah demo atau lihat contoh minimal dalam instruksi penggunaan untuk memulai.

Umd

Jika Anda menggunakan versi UMD, Anda dapat menemukan lebih banyak contoh di folder examples Repo GitHub dan demo UMD di bawah ini.

Jika Anda ingin menggunakan vue-form-json-schema langsung di browser, Anda dapat melakukannya dengan menggunakan versi UMD. Versi UMD AutoInstalls komponen vue-form-json-schema jika Vue ditemukan di jendela. Seluruh modul juga tersedia di window.VueFormJsonSchema di mana ekspor bernama seperti misalnya vfjsFieldMixin dapat diakses.

Di -host oleh UNKPG

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

Anda dapat mengganti vue-form-json-schema@latest ke versi tetap, seperti [email protected]

Diinstal dari NPM

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

Demo

Perhatikan bahwa semua demo menggunakan gaya bootstrap, tetapi tidak ada gaya yang termasuk dalam paket ini dan terserah Anda gaya apa yang harus digunakan.

Demo minimal

Konfigurasi paling sedikit untuk membuat elemen input .

Demo UI bersarang

Menggunakan kelas bootstrap untuk menunjukkan bagaimana tata letak dapat berbeda untuk perangkat dengan ukuran layar yang berbeda. Dalam contoh ini dua bidang input akan dibungkus di dalam div dengan kelas col-12 col-sm-6 . Coba mengubah ukuran jendela browser Anda juga melihatnya beraksi.

Visibilitas bersyarat dan demo animasi

Terkadang bidang hanya boleh ditampilkan jika suatu kondisi terpenuhi. Penggunaan <transition> untuk memberikan animasi.

Demo komponen vue

Lihat cara menggunakan komponen Vue pihak ketiga atau ketiga di vue-form-json-schema .

Vue async memuat formulir

Memuat formulir dari backend? Lihat contoh ini.

Formulir Pendaftaran dengan Validasi

Contoh yang lebih lengkap dengan pesan validasi dan kesalahan

Contoh bentuk pendaftaran dengan properti bersarang

Formulir pendaftaran di atas di mana kunci model formulir bersarang di bawah kunci lain

Demo umd

Semua contoh di atas direplikasi menggunakan versi UMD di folder examples repo ini.

Versi online dari demo pertama

Fitur

• Mendukung elemen HTML atau komponen VUE
• Kecil ( 32K tidak terkompresi, 6.5K Gzipped)
• Skema JSON terstandarisasi untuk anotasi dan validasi (oleh AJV)
• Tata letak independen dari struktur data

Dokumentasi

Gitbook

Penggunaan

Contoh dasar dengan satu bidang

Untuk menggunakan versi UMD, lihat folder examples di mana semua demo di atas direplikasi menggunakan versi UMD

Lihat demo

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

Dependensi

AJV

Untuk validasi formulir menggunakan skema JSON dan validasi internal

Lodash

get , set dan merge digunakan di seluruh paket. Ukuran bundel sangat penting dan selalu dipertimbangkan dan jadi kami sangat menghapus Lodash untuk hanya memasukkan kebutuhan absolut

Vue

Diuji dengan v2.5.9 tetapi mungkin akan bekerja pada versi apa pun> = v2.4.0

Todo

• Tulis tes
• Tambahkan dukungan i18n
  • Ditambahkan dalam 1.15.2 dengan options.ajv.locale pengaturan
• Tulis readme ini
• Gunakan AJV secara internal untuk memvalidasi:
  • vfs-global Prop ui-schema
  • vfs-component prop ui-schema
• Tulis dokumen
• Publikasikan dengan GitBook