v formly v3

v-formly-v3

v-formly-v3 est une bibliothèque de formulaires dynamiques (pilotée par JSON) pour vue 3.

La simplicité avant tout

Générez des formulaires dynamiques complexes et une vérification via JSON Schema & Ajv Validator standard, qui est rapide, concis et efficace.

Réutilisabilité

Générez des modèles de formulaires au format JSON, et un formulaire peut être réutilisé à plusieurs endroits en le modifiant simplement ! Il vous permet de développer rapidement des pages de formulaire. Par rapport à l'écriture de formulaires HTML traditionnels, l'utilisation d'un formulaire JSON pour définir des formulaires peut considérablement améliorer l'efficacité du développement.

Pilote Vue

Actuellement, Vue 3.x est pris en charge et la bibliothèque de composants prend en charge antdv v3 et element-plus. La prise en charge d'autres bibliothèques d'interface utilisateur (DevUI, etc.) pour Vue 3.x est en cours de développement. . .

démarrage rapide

Documentation et démo

Introduction

document

Stackblitzantdv, CodeSandboxantdv

Élément Stackblitz, élément CodeSandbox

Installer

Il est recommandé d'utiliser vite cli pour construire le projet

Une fois la construction terminée :

Installez v-formly-v3 en utilisant yarn :

yarn add v-formly-v3

Ou installez-le en utilisant npm :

npm i v-formly-v3 --save

utiliser

Basé sur la bibliothèque de composants 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" ) ; 

Basé sur la bibliothèque de composants 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" ) ; 

autre

Que vous appreniez ou utilisiez v-formly-v3, si vous avez des questions, vous pouvez rejoindre le groupe QQ : 610930944. Nous répondrons pour vous à tout inconvénient lié au processus d'utilisation de v-formly-v3 !

Licence MIT | Copyright © 2022-présent v-formly-v3