تحتاج نماذج لمشروعك القادم؟ فيما يلي كيفية إنشاء النماذج باستخدام FormKit.
النماذج هي بوابة للمستخدمين للتفاعل مع تطبيقك ولتوفير البيانات الأساسية لمهام مثل إنشاء الحساب ومعالجة الدفع وجمع المعلومات. لكن يمكن أن يكون بناء النماذج مهمة شاقة ، وتتطلب كودًا معياريًا واسعًا ويستغرق وقتًا طويلاً وعرضة للخطأ
تقدم FormKit حلاً من خلال توفير مكونات مسبقة الصنع تقضي على الحاجة إلى رمز معياري. إليك كيفية استخدامه.
ما هو FormKit؟
FormKit هو إطار عمل لبناء النماذج مفتوح المصدر تم تطويره خصيصًا لـ Vue 3 ، وهو مصمم لتبسيط عملية إنشاء نماذج عالية الجودة وجاهزة للإنتاج. إنها نسخة محسنة من الشعبية صياغة Vue مكتبة وتوفر أكثر من 25 خيار إدخال قابل للتخصيص ويمكن الوصول إليه ، إلى جانب مجموعة محددة مسبقًا من قواعد التحقق من الصحة.
يوفر FormKit أيضًا القدرة على إنشاء نماذج عبر مخططات ديناميكية متوافقة مع JSON ، مما يجعل من السهل إنشاء نماذج معقدة بسرعة. بالإضافة إلى ذلك ، لدى FormKit مجتمع نشط على Discord ، يوفر الدعم ويعزز التعاون بين المستخدمين. مع ميزاتها الشاملة ونظام الدعم ، تعد FormKit أداة موثوقة وفعالة للمطورين الذين يتطلعون إلى إنشاء نماذج لمشاريع Vue 3 الخاصة بهم.
ميزات FormKit Framework
ستجد مجموعة كبيرة من ميزات بناء النموذج في FormKit.
1. مكون واحد API
إحدى ميزات FormKit المثيرة للاهتمام هي واجهة برمجة التطبيقات (API) المكونة من مكون واحد: عنصر. يتيح لك الوصول إلى جميع أنواع المدخلات. يوفر هذا وصولاً مباشرًا وسهلاً إلى إنشاء عناصر النموذج بدلاً من الاضطرار إلى استخدام عناصر HTML الأصلية.
2. قواعد التحقق من الصحة المحددة مسبقًا
يبسط Formkit معالجة عمليات التحقق من صحة النموذج بالسماح لك بتطبيق مجموعة من القواعد مباشرة على المدخلات باستخدام خاصية التحقق من الصحة. يحتوي على أكثر من 30 قاعدة مختلفة محددة مسبقًا يمكنك تحديدها وفقًا لتفضيلاتك. بدلاً من ذلك ، يمكنك إنشاء قواعد مخصصة مسجلة عالميًا أو تحديدًا عند الإدخال للقيود المعقدة.
3. خيارات التصميم القابلة للتخصيص
لا تأتي FormKit بخيارات تصميم افتراضية ولكن لها سمة أساسية اختيارية - Genesis. تحتاج إلى تثبيت هذا بشكل منفصل.
عن طريق تثبيت ملف @ formkit / المواضيع طَرد.
تثبيت npm تضمين التغريدة/themesثم قم باستيراده إلى مشروعك
يستورد"@ formkit / المواضيع / التكوين"تتضمن خيارات التصميم الأخرى استخدام الفئات المخصصة التي تسمح لك بتطبيق الأنماط والفئات الخاصة بك على ترميز FormKit المقدم.
4. جيل المخطط
يعد إنشاء مخطط FormKit ميزة ممتازة تعمل على تبسيط عملية إنشاء حقول النموذج. المخطط عبارة عن مصفوفة من الكائنات ، حيث يمثل كل كائن عنصر HTML و يمكنك التمثيل فقط بتنسيق JSON.
تتكون مصفوفة المخطط من كائنات عقدة FormKit تتوافق مع عناصر مختلفة ، مثل عناصر HTML أو المكونات أو العقد النصية. يمكن لهذه الكائنات الرجوع إلى متغيرات Vue الموجودة مسبقًا وتقديم أي ترميز أو مكون بسمات ودعائم قابلة للتحرير ، مما يجعلها طريقة فعالة لبناء النماذج وتخصيصها. بشكل افتراضي ، لم يتم تسجيله عالميًا ، لذلك تحتاج إلى استيراده.
يستورد {FormKitSchema} من"@ formkit / vue"دمج FormKit في Vue3
لبدء استخدام FormKit في تطبيق Vue 3 ، أولاً ، قم بتثبيته داخل مشروعك. سيتضمن هذا القسم عرضًا توضيحيًا باستخدام تطبيق vue جديد من البداية.
المتطلبات الأساسية لاستخدام FormKit
قبل البدء ، تأكد من أن لديك ما يلي:
- الفهم الأساسي لـ Vue و JavaScript
- تم إعداد Node.js و npm على جهاز الكمبيوتر الخاص بك
بمجرد الانتهاء من السرعة ، تكون جاهزًا لإنشاء تطبيقك الأول.
إنشاء تطبيق Vue جديد
أولاً ، قم بتشغيل الأمر أدناه في الجهاز الطرفي لتهيئة تطبيق Vue جديد:
npm init vue@أحدثثم اتبع الخطوات المحددة في الموجه وفقًا لتفضيلاتك. بعد تثبيت المشروع بالكامل ، تابع تثبيت FormKit في التطبيق.
تثبيت npm تضمين التغريدة/vue بعد ذلك ، في main.js ملف.
يستورد {createApp} من"vue"
يستورد"./style.css"
يستورد برنامج من"./App.vue"
// إعداد Formkit
يستورد {plugin، defaultConfig} من"@ formkit / vue";
// استيراد موضوع سفر التكوين
يستورد"@ formkit / السمات / جينيسيس";
createApp (App) .use (توصيل في، defaultConfig) .mount ('#برنامج')حزمة @ formkit / vue يأتي مرفقًا مع المكون الإضافي Vue والإعداد الافتراضي للتثبيت السلس. بمجرد الانتهاء من الإعداد ، تكون جاهزًا تمامًا لدمج ملف مكون في تطبيق Vue 3 الخاص بك. أيضًا ، يمكنك إضافة الإعداد لموضوعات Genesis كما هو مذكور سابقًا.
إنشاء نماذج قابلة لإعادة الاستخدام باستخدام FormKit
يوضح هذا القسم كيفية استخدام FormKit في بناء نموذج وظيفي وقابل للتخصيص من خلال إنشاء نموذج تسجيل بسيط.
للحصول على بنية أكواد أفضل ، من الجيد إنشاء ملف منفصل لهذا المكون: التسجيل
أولاً ، حدد عنصر الإدخال باستخدام هذا التنسيق
يكتب="نص"
التسمية ="الاسم الأول"
نائب ="أبيولا"
التحقق من صحة ="مطلوب | الطول: 4"
يساعد = "أدخل ما لا يقل عن 4 أحرف"
<FormKit/>يوضح هذا الرمز كيفية استخدام FormKit لإنشاء إدخال نص باستخدام نوع من النص. تفصل خاصية التحقق القواعد باستخدام رمز الأنبوب "|". يضع عنصر المساعدة نصًا صغيرًا أسفل عنصر الإدخال مباشرةً.
أيضًا ، يمكنك استكشاف أنواع الإدخال الأخرى مثل الأنواع أدناه.
يكتب="نص"
التسمية ="اسم العائلة"
نائب ="استير"
التحقق من صحة ="مطلوب | الطول: 4"
يساعد = "أدخل ما لا يقل عن 4 أحرف"
/>
يكتب="بريد إلكتروني"
التسمية ="عنوان البريد الإلكتروني"
رمز البادئة ="بريد إلكتروني"
التحقق من صحة ="مطلوب | بريد إلكتروني"
نائب ="[email protected]"
/>
يكتب="تاريخ"
التسمية ="تاريخ الميلاد"
يساعد="أدخل تاريخ ميلادك بالتنسيق- DD / MM / YYYY"
التحقق من صحة ="مطلوب"
/> نموذج v ="قيمة"
يكتب="مذياع"
التسمية ="جنس"
: الخيارات ="['الذكور الإناث']"
يساعد="اختر جنسك"
/>
يكتب="ملف"
التسمية ="رفع صورتك"
قبول =".jpg و .png و .jpeg"
يساعد="حدد صورتك"
/>
يوضح الكود كيفية استخدام بعض عناصر الإدخال الأخرى وتعيين قواعد التحقق من الصحة.
يتضمن FormKit خاصية type تسمى "form" والتي تقوم بتغليف جميع عناصر الإدخال. يراقب حالة التحقق من صحة النموذج ويمنع المستخدمين من إرساله إذا كانت أي مدخلات غير صالحة. بالإضافة إلى ذلك ، يقوم تلقائيًا بإنشاء زر إرسال.
يكتب="استمارة"
استمارة-فصل="الحاوية الخارجية"
إرسال التسمية ="يسجل"
@يُقدِّم="يسجل">
الجمع بين كل شيء معًا يقدم النموذج الكامل ، كما هو موضح في الصورة أدناه.
إنشاء النموذج باستخدام مخطط FormKit
باستخدام مخططات JSON ، من الممكن إنشاء نماذج مشابهة لعناصر الإدخال ، كما تم القيام به سابقًا. لإنشاء النموذج ، ما عليك سوى توفير صفيف المخطط الخاص بك إلى ملف المكون من خلال استخدام مخطط دعم.
صفيف المخطط
مقدار ثابت المخطط = [
{
فورمكيت $: "بريد إلكتروني",
اسم: "بريد إلكتروني",
ملصق: "عنوان البريد الإلكتروني",
العنصر النائب: "أدخل بريدك الإلكتروني",
تصديق: "مطلوب | بريد إلكتروني",
},
{
فورمكيت $: 'كلمة المرور',
اسم: 'كلمة المرور',
ملصق: 'كلمة المرور',
تصديق: 'مطلوب | الطول: 5،16'
},
{
فورمكيت $: 'كلمة المرور',
اسم: 'تأكيد كلمة المرور',
ملصق: 'تأكيد كلمة المرور',
تصديق: "مطلوب | تأكيد",
التحقق من الصحة 'تأكيد كلمة المرور',
},
];ثم يتم تمريره إلى الخاصية في مكون FormKit.
"استمارة" استمارة-فصل="الحاوية الخارجية"يقدم التسمية ="تسجيل الدخول">
<FormKitSchema:مخطط="مخطط" />
FormKit> هذا هو الناتج النهائي الذي تم إنشاؤه:
نهج أسرع لبناء النماذج في Vue3
يوفر FormKit نهجًا أسرع وأكثر كفاءة لإنشاء النماذج في Vue 3. باستخدام FormKit ، يمكنك التخلص من الحاجة إلى إنشاء قوالب معيارية من البداية ، مما يسمح لك بالتركيز على تنفيذ المنطق مباشرةً. لا توفر هذه العملية المبسطة الوقت فحسب ، بل تعزز الإنتاجية أيضًا.
بالإضافة إلى ذلك ، يتيح FormKit العرض الديناميكي للنماذج من خلال العرض الشرطي. تتيح لك هذه الميزة إنشاء واجهات تفاعلية وسهلة الاستخدام للمستخدمين ، حيث يتم عرض عناصر النموذج أو إخفاءها بناءً على شروط معينة.
