v formly v3

v-formalmente-v3

v-formly-v3 es una biblioteca de formularios dinámica (controlada por JSON) para vue 3.

La simplicidad primero

Genere formularios dinámicos complejos y verificación a través del estándar JSON Schema & Ajv Validator, que es rápido, conciso y eficiente.

Reutilizabilidad

Genere plantillas de formulario en formato JSON y un formulario se podrá reutilizar en varios lugares simplemente modificándolo. Le permite desarrollar rápidamente páginas de formularios. En comparación con escribir formularios html tradicionales, el uso de formularios JSON para definir formularios puede mejorar en gran medida la eficiencia del desarrollo.

controlador de vista

Actualmente se admite Vue 3.x y la biblioteca de componentes admite antdv v3 y element-plus. Se está desarrollando soporte para otras bibliotecas de interfaz de usuario (DevUI, etc.) para Vue 3.x. . .

inicio rápido

Documentación y demostración

Introducción

documento

Stackblitzantdv, CódigoSandboxantdv

Elemento Stackblitz, elemento CodeSandbox

Instalar

Se recomienda utilizar vite cli para construir el proyecto.

Una vez completada la construcción:

Instale v-formly-v3 usando yarn :

yarn add v-formly-v3

O instálelo usando npm :

npm i v-formly-v3 --save

usar

Basado en la biblioteca de componentes 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" ) ; 

Basado en la biblioteca de componentes 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" ) ; 

otro

Ya sea que estés aprendiendo o usando v-formly-v3, si tienes alguna pregunta, puedes unirte al grupo QQ: 610930944. ¡Resolveremos cualquier inconveniente en el proceso de usar v-formly-v3 por ti!

Con licencia del MIT | Copyright © 2022-presente v-formly-v3