vue form json schema

Vue Form JSON SCHEMA

مولد النموذج القائم على مخطط JSON ، أحضر مكوناتك!

استخدم أي عنصر VUE أو عنصر HTML!

لا توجد مكونات مسبقة لك لتتمكن من لغز النموذج الخاص بك مع. بدلاً من ذلك ، يمكنك استخدام أي مكون أو عنصر ينبعث منه حدث أو مخصص أو أصلي.

لاحظ أن جميع مكونات VUE التي تستخدم v-model تنبعث منها حدث 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 / Rollup وترغب في استخدام إصدار ESM ، فأنت بحاجة إلى استيراد VueFormJsonsChema مثل هذا:

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

تحقق من العروض التوضيحية أو انظر مثالًا بسيطًا في تعليمات الاستخدام للبدء.

UMD

إذا كنت تستخدم إصدار UMD ، فيمكنك العثور على المزيد من الأمثلة في مجلد examples من GitHub Repo و UMD Demo أدناه.

إذا كنت ترغب في استخدام vue-form-json-schema مباشرة في متصفح ، فيمكنك القيام بذلك باستخدام إصدار UMD. يقوم الإصدار UMD بتثبيت مكون vue-form-json-schema إذا تم العثور على Vue على النافذة. تتوفر الوحدة بأكملها أيضًا على window.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 .

متداخل واجهة المستخدم التجريبية

استخدام فئات bootstrap لإظهار كيف يمكن أن يكون التخطيط مختلفًا للأجهزة ذات أحجام شاشة مختلفة. في هذا المثال ، سيتم لف حقلين للإدخال داخل DIV مع فئات col-12 col-sm-6 . حاول تغيير حجم نافذة المتصفح أيضًا ، انظر إلى العمل.

العرض الشرطي وتوضيح الرسوم المتحركة

في بعض الأحيان ، يجب إظهار الحقل فقط إذا تم استيفاء حالة. يستخدم <transition> لتوفير الرسوم المتحركة.

مكونات VUE العرض التوضيحي

تعرف على كيفية استخدام مكونات VUE الخاصة بك أو ثالثة في vue-form-json-schema .

vue async تحميل النموذج

تحميل النموذج من الواجهة الخلفية؟ تحقق من هذا المثال.

نموذج التسجيل مع التحقق من الصحة

مثال أكثر اكتمالا مع رسائل التحقق من الصحة والخطأ

مثال نموذج التسجيل مع الخصائص المتداخلة

نموذج التسجيل أعلاه حيث تتداخل مفاتيح نموذج النموذج تحت مفتاح آخر

UMD Demos

يتم نسخ جميع الأمثلة المذكورة أعلاه باستخدام إصدار UMD في مجلد examples من هذا الريبو.

النسخة عبر الإنترنت من العرض التوضيحي الأول

سمات

• يدعم أي عنصر HTML أو مكون VUE
• صغير ( 32K غير مضغوط ، 6.5K بايت)
• مخطط JSON الموحد للتعليق والتحقق من الصحة (بواسطة AJV)
• التصميم مستقل عن بنية البيانات

الوثائق

gitbook

الاستخدام

المثال الأساسي مع حقل واحد

لاستخدام إصدار UMD ، تحقق من مجلد examples حيث يتم نسخ جميع العروض التوضيحية أعلاه باستخدام إصدار UMD

انظر العرض التوضيحي

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

التبعيات

AJV

للتحقق من صحة النموذج باستخدام مخطط JSON والتحقق الداخلي

لوداش

يتم استخدام get و set و merge في جميع أنحاء الحزمة. حجم الحزمة مهم للغاية على الرغم من أنه يتم النظر فيه دائمًا ، ولذا فإننا نقوم بتجريد Lodash بشدة لتشمل فقط الضروريات المطلقة

Vue

تم اختباره باستخدام v2.5.9 ولكن من المحتمل أن يعمل على أي إصدار> = v2.4.0

تودو

• اكتب الاختبارات
• إضافة دعم i18n
  • أضيفت في 1.15.2 مع options.ajv.locale
• اكتب هذا ReadMe
• استخدم AJV داخليًا للتحقق من صحة:
  • vfs-global Prop ui-schema
  • vfs-component Prop ui-schema
• اكتب المستندات
• نشر مع Gitbook