v formly v3

v-formly-v3

v-formly-v3 ist eine dynamische (JSON-gesteuerte) Formularbibliothek für Vue 3.

Einfachheit zuerst

Generieren Sie komplexe dynamische Formulare und Überprüfungen mit dem Standard-JSON-Schema und dem Ajv-Validator, der schnell, präzise und effizient ist.

Wiederverwendbarkeit

Generieren Sie Formularvorlagen im JSON-Format, und ein Formular kann durch einfaches Ändern an mehreren Stellen wiederverwendet werden! Damit können Sie Formularseiten schnell entwickeln, verglichen mit dem Schreiben herkömmlicher HTML-Formularformulare. Die Verwendung von JSON-Formularen zum Definieren von Formularen kann die Entwicklungseffizienz erheblich verbessern.

Vue-Treiber

Derzeit wird Vue 3.x unterstützt und die Komponentenbibliothek unterstützt antdv v3 und element-plus. Unterstützung für andere UI-Bibliotheken (DevUI usw.) für Vue 3.x ist in der Entwicklung. . .

Schnellstart

Dokumentation und Demo

Einführung

dokumentieren

Stackblitzantdv, CodeSandboxantdv

Stackblitz-Element, CodeSandbox-Element

Installieren

Es wird empfohlen, zum Erstellen des Projekts vite cli zu verwenden

Nachdem der Build abgeschlossen ist:

Installieren Sie v-formly-v3 mit yarn :

yarn add v-formly-v3

Oder installieren Sie es mit npm :

npm i v-formly-v3 --save

verwenden

Basierend auf der Komponentenbibliothek 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" ) ; 

Basierend auf einer Element-Plus-Komponentenbibliothek

 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" ) ; 

andere

Unabhängig davon, ob Sie v-formly-v3 lernen oder verwenden, können Sie bei Fragen der QQ-Gruppe beitreten: 610930944. Wir werden alle Unannehmlichkeiten bei der Verwendung von v-formly-v3 für Sie beantworten!

MIT-Lizenz |. Copyright © 2022-present v-formly-v3