v formly v3

v-formly-v3

v-formly-v3 هي مكتبة نماذج ديناميكية (مدفوعة بـ JSON) لـ vue 3.

البساطة أولا

قم بإنشاء نماذج ديناميكية معقدة والتحقق من خلال JSON Schema & Ajv Validator القياسي، وهو سريع وموجز وفعال.

قابلية إعادة الاستخدام

أنشئ قوالب نماذج على شكل JSON، ويمكن إعادة استخدام النموذج في أماكن متعددة بمجرد تعديله! إنه يمكّنك من تطوير صفحات النماذج بسرعة، مقارنةً بكتابة نماذج نماذج html التقليدية، فإن استخدام نموذج JSON لتحديد النماذج يمكن أن يحسن كفاءة التطوير بشكل كبير.

سائق فيو

يتم حاليًا دعم Vue 3.x، وتدعم مكتبة المكونات antdv v3 وelement-plus. ويجري حاليًا تطوير الدعم لمكتبات واجهة المستخدم الأخرى (DevUI، وما إلى ذلك) لـ Vue 3.x. . .

بداية سريعة

التوثيق والعرض التوضيحي

مقدمة

وثيقة

Stackblitzantdv، CodeSandboxantdv

عنصر Stackblitz، عنصر CodeSandbox

ثَبَّتَ

يوصى باستخدام vite cli لبناء المشروع

بعد الانتهاء من البناء:

تثبيت v-formly-v3 باستخدام yarn :

yarn add v-formly-v3

أو قم بتثبيته باستخدام npm :

npm i v-formly-v3 --save

يستخدم

استنادًا إلى مكتبة مكونات antdv v3

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import Antd from "ant-design-vue" ;
import "ant-design-vue/dist/antd.css" ;
import * as antIcons from "@ant-design/icons-vue" ;
import VFormly from "v-formly-v3/antdv" ;

const app = createApp ( App ) ;
app . use ( Antd ) ;
Object . keys ( antIcons ) . forEach ( ( key ) => {
  app . component ( key , ( antIcons as any ) [ key ] ) ;
} ) ;
app . config . globalProperties . $antIcons = antIcons ;

app . use ( VFormly , {
  ui : {
    errors : {
      required : "必填项" ,
    } ,
  } ,
} ) ;
app . mount ( "#app" ) ; 

بناءً على مكتبة مكونات Element-Plus

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import ElementPlus from "element-plus" ;
import "element-plus/dist/index.css" ;
import * as elIcons from "@element-plus/icons-vue" ;
import VFormly from "v-formly-v3/element" ;

const app = createApp ( App ) ;
app . use ( ElementPlus ) ;
for ( const [ key , component ] of Object . entries ( elIcons ) ) {
  app . component ( key , component ) ;
}
app . config . globalProperties . $elIcons = elIcons ;

app . use ( VFormly , {
  lib : "element" ,
  ui : {
    errors : {
      required : "必填项" ,
    } ,
  } ,
} ) ;
app . mount ( "#app" ) ; 

آخر

سواء كنت تتعلم أو تستخدم v-formly-v3، إذا كان لديك أي أسئلة، يمكنك الانضمام إلى مجموعة QQ: 610930944. وسوف نقوم بالرد على أي إزعاجات في عملية استخدام v-formly-v3 لك!

حقوق الطبع والنشر © 2022 إلى الوقت الحاضر v-formly-v3