v formly v3

v-formly-v3

v-formly-v3 é uma biblioteca de formulários dinâmica (orientada por JSON) para vue 3.

Simplicidade em primeiro lugar

Gere formulários dinâmicos complexos e verificação por meio do esquema JSON padrão e do validador Ajv, que é rápido, conciso e eficiente.

Reutilização

Gere modelos de formulário no formato JSON e um formulário pode ser reutilizado em vários lugares, simplesmente modificando-o! Ele permite que você desenvolva páginas de formulário rapidamente. Em comparação com a escrita de formulários HTML tradicionais, o uso do formulário JSON para definir formulários pode melhorar muito a eficiência do desenvolvimento.

Driver Vue

Atualmente, o Vue 3.x é compatível e a biblioteca de componentes oferece suporte a antdv v3 e element-plus. O suporte para outras bibliotecas de UI (DevUI, etc.) para Vue 3.x está em desenvolvimento. . .

início rápido

Documentação e demonstração

Introdução

documento

Stackblitzantdv, CodeSandboxantdv

Elemento Stackblitz, elemento CodeSandbox

Instalar

Recomenda-se usar vite cli para construir o projeto

Após a conclusão da construção:

Instale v-formly-v3 usando yarn :

yarn add v-formly-v3

Ou instale-o usando npm :

npm i v-formly-v3 --save

usar

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

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

outro

Esteja você aprendendo ou usando v-formly-v3, se tiver alguma dúvida, você pode ingressar no grupo QQ: 610930944. Responderemos a quaisquer inconvenientes no processo de utilização do v-formly-v3 para você!

MIT Licenciado | Copyright © 2022-presente v-formly-v3